箭头函数中,是没有this的,所以写在箭头函数中的this,会自动向当前作用域的上一层作用域寻找,是否含有this,如果有就指代,没有就继续找上一层。
javascript
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