vue中l(wèi)et that=this的作用及說明

更新時(shí)間：2022年10月18日 14:50:31 作者：晚風(fēng)914

這篇文章主要介紹了vue中l(wèi)et that=this的作用及說明，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

vue let that=this的作用

this 會隨著上下文環(huán)境而變換它的指向，在當(dāng)前作用域中設(shè)置一個(gè)變量用來存儲 this 可以防止在其他地方找不到 this 的錯誤。

```javascript
$("#btn").click(function(){
    var that = this;//這里this和that都代表了"#btn"這個(gè)對象
    $(".tr").each(function(){
          this;//在這里this代表的是每個(gè)遍歷到的".tr"對象
          that;//仍代表"#btn"對象
    })
})

vue.js的this作用域問題

下面是一段讓頁面顯示動態(tài)時(shí)間的代碼：

<div id="app">
? ? ? ? <h3 style="text-align:end;">當(dāng)前時(shí)間：{{DataNow}}</h3>
? ? </div>
? ? <script>
? ? ? ? var app = new Vue({
? ? ? ? ? ? el: '#app',
? ? ? ? ? ? data: {
? ? ? ? ? ? ? ? DataNow: new Date(),
? ? ? ? ? ? },
? ? ? ? ? ? mounted: function () {
? ? ? ? ? ? ? ? var _this = this; //聲明一個(gè)變量指向Vue實(shí)例this，保證作用域一致
? ? ? ? ? ? ? ? this.timer = setInterval(function () {
? ? ? ? ? ? ? ? ? ? _this.DataNow = new Date(); //修改數(shù)據(jù)date
? ? ? ? ? ? ? ? }, 1000);
? ? ? ? ? ? },
? ? ? ? ? ? beforeDestroy: function () {
? ? ? ? ? ? ? ? if (this.timer) {
? ? ? ? ? ? ? ? ? ? clearInterval(this.timer); //在Vue實(shí)例銷毀前，清除我們的定時(shí)器
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? })
? ? </script>

var _this = this;這里聲明一個(gè)變量指向父函數(shù)的this, 用于 _this.DataNow = new Date(); 修改父函數(shù)的“DataNow”實(shí)現(xiàn)動態(tài)時(shí)間，如果這里改為this.DataNow = new Date() 就指向了mounted里面的DataNow 則沒有了效果；

_this只是一個(gè)變量名，this代表父函數(shù)，如果在子函數(shù)還用this，this的指向就變成子函數(shù)了，_this就是用來存儲指向的。

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

詳解vue-cli腳手架中webpack配置方法
這篇文章主要介紹了詳解vue-cli腳手架中webpack配置方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-08-08
Vue學(xué)習(xí)筆記進(jìn)階篇之函數(shù)化組件解析
本篇文章主要介紹了Vue學(xué)習(xí)筆記進(jìn)階篇之函數(shù)化組件探究，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-07-07
Vue超詳細(xì)講解重試機(jī)制示例
這篇文章主要介紹了Vue重試機(jī)制示例，重試指的是當(dāng)加載出錯時(shí)，有能力重新發(fā)起加載組件的請求。異步組件加載失敗后的重試機(jī)制，與請求服務(wù)端接口失敗后的重試機(jī)制一樣
2023-01-01
vue制作點(diǎn)擊切換圖片效果的詳細(xì)思路與步驟
這篇文章主要給大家介紹了關(guān)于vue制作點(diǎn)擊切換圖片效果的詳細(xì)思路與步驟,圖片切換是一個(gè)很經(jīng)典的Vue入門學(xué)習(xí)案例,在你學(xué)習(xí)完一些基本的v-指令后,你可以嘗試去寫一個(gè)簡單的demo去鞏固和熟悉這些指令的使用方法,需要的朋友可以參考下
2023-11-11
一篇文章看懂Vue組合式API
眾所周知組合式API是一系列API的集合,使我們可以使用函數(shù)而不是聲明選項(xiàng)的方式書寫Vue組件,這篇文章主要給大家介紹了關(guān)于Vue組合式API的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-04-04
vue3學(xué)習(xí)指導(dǎo)教程(附帶獲取屏幕可視區(qū)域?qū)捀?
Vue3是Vue的第三個(gè)版本更快,更輕,易維護(hù),更多的原生支持,下面這篇文章主要給大家介紹了關(guān)于vue3學(xué)習(xí)指導(dǎo)教程(附帶獲取屏幕可視區(qū)域?qū)捀?的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-04-04
Vue項(xiàng)目中props傳值時(shí)子組件檢測不到的問題及解決
這篇文章主要介紹了Vue項(xiàng)目中props傳值時(shí)子組件檢測不到的問題及解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-08-08
如何在 Vue3 中使用 OpenLayers 實(shí)現(xiàn)事件 loadst
在這篇文章中,我將詳細(xì)介紹如何在 Vue3 + OpenLayers 中監(jiān)聽 loadstart 和 loadend 事件,并通過 Vue3 Composition API 進(jìn)行代碼優(yōu)化,使其更加高效、健壯,感興趣的朋友一起看看吧
2025-04-04
Antd表格滾動寬度自適應(yīng) 不換行的實(shí)例
這篇文章主要介紹了Antd表格滾動寬度自適應(yīng) 不換行的實(shí)例，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-10-10
Vue項(xiàng)目中env文件的作用和配置詳解
Vue項(xiàng)目中,.env文件是運(yùn)行項(xiàng)目時(shí)的環(huán)境配置文件,但是在實(shí)際開發(fā)過程中,有本地開發(fā)環(huán)境、測試環(huán)境、生產(chǎn)環(huán)境等,不同環(huán)境對應(yīng)的配置會不一樣,本文給大家介紹了Vue項(xiàng)目中env文件的作用和配置,需要的朋友可以參考下
2024-12-12