箭头函数中,是没有this的,所以写在箭头函数中的this,会自动向当前作用域的上一层作用域寻找,是否含有this,如果有就指代,没有就继续找上一层。
new Vue({el:'#root',data:{firstName:'张',lastName:'三',fullName:'张-三'},watch:{firstName(val){setTimeout(()=>{this.fullName = val + '-' + this.lastName},1000);},lastName(val){this.fullName = this.firstName + '-' + val}}
})
举个简单的例子,以上述Vue代码为例
setTimeout函数,是箭头函数
JS的window对象调用setTimeout函数
setTimeout箭头函数中没有this可以指代的对象
向上一层作用域寻找
上一层作用域是Vue实例对象vm的监视属性watch
所以watch中的this指代的是Vue实例对象vm
所以setTimeout函数中的this指代的就是Vue实例对象vm