Vue This指代

This的使用

<script type="text/javascript">
  var message = "hello";
  var app = new Vue({
    el:"#app",
    data:{
      message:"你好";
    },
    create: function(){
      this.showMessage1();
      this.showMessage2();
    },
    methods:{
      showMessage1:func(){
        setTimeout(function(){ 
          document.getElementById("id1").innerText = this.message; //window:hello
        },5)
      },
      showMessage2:func(){
        setTimeout(() => {
          document.getElementById("id2").innerText = this.message;  // vue 实例: 你好
        },5)
      }

    }
  })

第一个输出英文 hello, 第二个输出中文 ‘你好’
说明showMessage1()里面的this指的是window, 而showMessage2()里面的this 指的是vue实例.

create: function(){
  this.showMessage1(); // this 1
  this.showMessage2(); // this 2
}

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

对于普通函数(包括匿名函数), this指的是直接的调用者,
在非严格模式下,如果没有直接调用者,this指的是window.
showMessage1()里面setTimeout使用了匿名函数,this 指向window.
showMessage2()里面,箭头函数 => 是没有自己的this, 在它内部使用的this是由他定义的宿主对象决定,.
showMessage2()里面定义的箭头函数宿主对象vue实例,所以它里面使用的this 指向vue 实例.

2d1b6787a121eebf85624a1c15773822.png