Vue实例里this的使用
2019獨角獸企業重金招聘Python工程師標準>>>
要理解Vue實例里this的使用，首先要理解this在JavaScript里的用法，可以參考理解JavaScript普通函數以及箭頭函數里使用的this。
這是vue文檔里的原話：
All?lifecycle?hooks?are?called?with?their?'this'?context?pointing?to?the?Vue?instance?invoking?it.
意思是：在Vue所有的生命周期鉤子方法（如created，mounted，?updated以及destroyed）里使用this，this指向調用它的Vue實例。
示例分析
<!DOCTYPE?html> <html> <head><meta?charset="UTF-8"><title></title><script?src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script><script?src="https://unpkg.com/vue@2.5.9/dist/vue.js"></script> </head> <div?id="app"?style="width:?100%;height:?auto;font-size:20px;"><p?id="id1"></p><p?id="id2"></p> </div> <script?type="text/javascript">var?message?=?"Hello!";var?app?=?new?Vue({el:"#app",data:{message:?"你好！"},created:?function()?{this.showMessage1();????//this?1this.showMessage2();???//this?2},methods:{showMessage1:function(){setTimeout(function()?{document.getElementById("id1").innerText?=?this.message;??//this?3},?10)},showMessage2:function()?{setTimeout(()?=>?{document.getElementById("id2").innerText?=?this.message;??//this?4},?10)}}}); </script> </html>示例定義了兩個message。一個是全局變量，即window.message，它的值為英文“Hello!”。另外一個是vue實例的數據message，它的值為中文的“你好！”。
運行示例，在瀏覽器得到：
第一個輸出英文"Hello!”，第二個輸出中文“你好！”。這說明了showMessage1()里的this指的是window，而showMessage2()里的this指的是vue實例。
created
created:?function()?{this.showMessage1();????//this?1this.showMessage2();???//this?2 }created函數為vue實例的鉤子方法，它里面使用的this指的是vue實例。
showMessage1()
showMessage1:function(){setTimeout(function()?{document.getElementById("id1").innerText?=?this.message;??//this?3},?10) }對于普通函數（包括匿名函數），this指的是直接的調用者，在非嚴格模式下，如果沒有直接調用者，this指的是window。showMessage1()里setTimeout使用了匿名函數，this指向window。
showMessage2()
showMessage2:function()?{setTimeout(()?=>?{document.getElementById("id2").innerText?=?this.message;??//this?4},?10) }箭頭函數是沒有自己的this，在它內部使用的this是由它定義的宿主對象決定。showMessage2()里定義的箭頭函數宿主對象為vue實例，所以它里面使用的this指向vue實例。
綁定vue實例到this的方法
為了避免this指向出現歧義，有兩種方法綁定this。
使用bind
showMessage1()可以改為：
showMessage1:function(){setTimeout(function()?{document.getElementById("id1").innerText?=?this.message;??//this?3}.bind(this),?10) }對setTimeout()里的匿名函數使用bind()綁定到vue實例的this。這樣在匿名函數內的this也為vue實例。
把vue實例的this賦值給另一個變量再使用
showMessage1()也可以改為
showMessage1:function(){var?self?=?this;setTimeout(function()?{document.getElementById("id1").innerText?=?self.message;??//改為self}.bind(this),?10) }這里吧表示vue實例的this賦值給變量self。在使用到this的地方改用self引用。
轉載于:https://my.oschina.net/jack088/blog/2251579
總結
以上是生活随笔為你收集整理的Vue实例里this的使用的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Web的三大基石
- 下一篇： Windows MySQL8.0安装出错