Vue实例里this的使用

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

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

created: function() {
  this.showMessage1();    //this 1
  this.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实例。

参考：https://majing.io/posts/10000005341170