Vue实例里this的使用
2019獨(dú)角獸企業(yè)重金招聘Python工程師標(biāo)準(zhǔn)>>>
要理解Vue實(shí)例里this的使用，首先要理解this在JavaScript里的用法，可以參考理解JavaScript普通函數(shù)以及箭頭函數(shù)里使用的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指向調(diào)用它的Vue實(shí)例。
示例分析
<!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>示例定義了兩個(gè)message。一個(gè)是全局變量，即window.message，它的值為英文“Hello!”。另外一個(gè)是vue實(shí)例的數(shù)據(jù)message，它的值為中文的“你好！”。
運(yùn)行示例，在瀏覽器得到：
第一個(gè)輸出英文"Hello!”，第二個(gè)輸出中文“你好！”。這說明了showMessage1()里的this指的是window，而showMessage2()里的this指的是vue實(shí)例。
created
created:?function()?{this.showMessage1();????//this?1this.showMessage2();???//this?2 }created函數(shù)為vue實(shí)例的鉤子方法，它里面使用的this指的是vue實(shí)例。
showMessage1()
showMessage1:function(){setTimeout(function()?{document.getElementById("id1").innerText?=?this.message;??//this?3},?10) }對(duì)于普通函數(shù)（包括匿名函數(shù)），this指的是直接的調(diào)用者，在非嚴(yán)格模式下，如果沒有直接調(diào)用者，this指的是window。showMessage1()里setTimeout使用了匿名函數(shù)，this指向window。
showMessage2()
showMessage2:function()?{setTimeout(()?=>?{document.getElementById("id2").innerText?=?this.message;??//this?4},?10) }箭頭函數(shù)是沒有自己的this，在它內(nèi)部使用的this是由它定義的宿主對(duì)象決定。showMessage2()里定義的箭頭函數(shù)宿主對(duì)象為vue實(shí)例，所以它里面使用的this指向vue實(shí)例。
綁定vue實(shí)例到this的方法
為了避免this指向出現(xiàn)歧義，有兩種方法綁定this。
使用bind
showMessage1()可以改為：
showMessage1:function(){setTimeout(function()?{document.getElementById("id1").innerText?=?this.message;??//this?3}.bind(this),?10) }對(duì)setTimeout()里的匿名函數(shù)使用bind()綁定到vue實(shí)例的this。這樣在匿名函數(shù)內(nèi)的this也為vue實(shí)例。
把vue實(shí)例的this賦值給另一個(gè)變量再使用
showMessage1()也可以改為
showMessage1:function(){var?self?=?this;setTimeout(function()?{document.getElementById("id1").innerText?=?self.message;??//改為self}.bind(this),?10) }這里吧表示vue實(shí)例的this賦值給變量self。在使用到this的地方改用self引用。
轉(zhuǎn)載于:https://my.oschina.net/jack088/blog/2251579
總結(jié)
以上是生活随笔為你收集整理的Vue实例里this的使用的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Web的三大基石
- 下一篇： Windows MySQL8.0安装出错