像在methods中我们访问data中的属性,需要加this。那么,为什么在watch中访问其它对象中的属性不需要加this呢
```javascript
<script>
Vue.config.productionTip = false
var vm = new Vue({
el: '#app',
data: {
isHot:true
},
methods: {
info(){
this.isHot = !this.isHot;
}
},
computed:{
weather(){
return (this.isHot? '炎热' : '凉爽');
}
},
//监视watch
watch:{
weather:{
immediate:true,//初始化时让handler调用一次(默认值:false)
//handler什么时候调用?当在weather发生改变时
handler(newValue,oldValue){
console.log('weather被改变了',newValue,oldValue);
}
}
}
})
</script>
我这边写过一篇文章,尽管不是完全一样,但是希望可以帮你理解这个问题 https://blog.csdn.net/weixin_42678675/article/details/123570591
methods
中的函数,经过Vue编译成原生JS之后,他仍然是一个函数,需要依靠this
的指向,去获取到正确的实例(实例是指,比如你这个组件叫 Home.vue
,那 Home
这个组件就是实例,而this
会指向当前的这个实例,这就是为什么你无法直接用this在 Home.vue
中访问 About.vue
中的数据)watch
中的内容,其实是Vue在编译过程中才会用到的,它属于Vue所管理的一个对象,既然是他自己要用到的,他可以设计成需要用this,也可以设计成无需用this(很显然,不用this比较方便,Vue也是这么做的)