Vue实例里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实例。

示例定义了两个message。一个是全局变量,即window.message,它的值为英文“Hello!”。另外一个是vue实例的数据message,它的值为中文的“你好!”。

运行示例:

第一个输出英文”Hello!”,第二个输出中文“你好!”。这说明了showMessage1()里的this指的是window,而showMessage2()里的this指的是vue实例。

created

created函数为vue实例的钩子方法,它里面使用的this指的是vue实例。

showMessage1()

对于普通函数(包括匿名函数),this指的是直接的调用者,在非严格模式下,如果没有直接调用者,this指的是window。showMessage1()里setTimeout使用了匿名函数,this指向window。

showMessage2()

箭头函数是没有自己的this,在它内部使用的this是由它定义的宿主对象决定。showMessage2()里定义的箭头函数宿主对象为vue实例,所以它里面使用的this指向vue实例。

绑定vue实例到this的方法

为了避免this指向出现歧义,有两种方法绑定this。

使用bind

showMessage1()可以改为:

对setTimeout()里的匿名函数使用bind()绑定到vue实例的this。这样在匿名函数内的this也为vue实例。

把vue实例的this赋值给另一个变量再使用

showMessage1()也可以改为

这里吧表示vue实例的this赋值给变量self。在使用到this的地方改用self引用。

 

 

转载自:https://majing.io/posts/10000005341170

注:下载本站视频仅供个人学习使用,禁止用于其他用途,因用户自身造成一切问题与本站无关!版权归原作者所有,本站不承担技术及版权问题,如有侵犯您的权益请联系我们删除

为您推荐

发表评论