vue中l(wèi)et that=this的作用及說明
vue let that=this的作用
this 會隨著上下文環(huán)境而變換它的指向,在當前作用域中設置一個變量用來存儲 this 可以防止在其他地方找不到 this 的錯誤。
```javascript $("#btn").click(function(){ var that = this;//這里this和that都代表了"#btn"這個對象 $(".tr").each(function(){ this;//在這里this代表的是每個遍歷到的".tr"對象 that;//仍代表"#btn"對象 }) })
vue.js的this作用域問題
下面是一段讓頁面顯示動態(tài)時間的代碼:
<div id="app"> ? ? ? ? <h3 style="text-align:end;">當前時間:{{DataNow}}</h3> ? ? </div> ? ? <script> ? ? ? ? var app = new Vue({ ? ? ? ? ? ? el: '#app', ? ? ? ? ? ? data: { ? ? ? ? ? ? ? ? DataNow: new Date(), ? ? ? ? ? ? }, ? ? ? ? ? ? mounted: function () { ? ? ? ? ? ? ? ? var _this = this; //聲明一個變量指向Vue實例this,保證作用域一致 ? ? ? ? ? ? ? ? this.timer = setInterval(function () { ? ? ? ? ? ? ? ? ? ? _this.DataNow = new Date(); //修改數據date ? ? ? ? ? ? ? ? }, 1000); ? ? ? ? ? ? }, ? ? ? ? ? ? beforeDestroy: function () { ? ? ? ? ? ? ? ? if (this.timer) { ? ? ? ? ? ? ? ? ? ? clearInterval(this.timer); //在Vue實例銷毀前,清除我們的定時器 ? ? ? ? ? ? ? ? } ? ? ? ? ? ? } ? ? ? ? }) ? ? </script>
var _this = this;這里聲明一個變量指向父函數的this, 用于 _this.DataNow = new Date(); 修改父函數的“DataNow”實現動態(tài)時間,如果這里改為this.DataNow = new Date() 就指向了mounted里面的DataNow 則沒有了效果;
_this只是一個變量名,this代表父函數,如果在子函數還用this,this的指向就變成子函數了,_this就是用來存儲指向的。
以上為個人經驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關文章
基于vue-cli3多頁面開發(fā)apicloud應用的教程詳解
這篇文章主要介紹了基于vue-cli3多頁面開發(fā)apicloud應用,本文采用vue-cli+APIcloud的方式寫解決以上痛點,開發(fā)靈活,并且打包之后體積更小速度更快,需要的朋友可以參考下2019-06-06vue3.0語法糖內的defineProps及defineEmits解析
這篇文章主要介紹了vue3.0語法糖內的defineProps及defineEmits解析,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-04-04