关于Vue中watch的一个小问题

问题遇到的现象和发生背景

像在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

  1. 你可以这么理解,methods 中的函数,经过Vue编译成原生JS之后,他仍然是一个函数,需要依靠this的指向,去获取到正确的实例(实例是指,比如你这个组件叫 Home.vue,那 Home 这个组件就是实例,而this会指向当前的这个实例,这就是为什么你无法直接用this在 Home.vue中访问 About.vue 中的数据)
  2. watch 中的内容,其实是Vue在编译过程中才会用到的,它属于Vue所管理的一个对象,既然是他自己要用到的,他可以设计成需要用this,也可以设计成无需用this(很显然,不用this比较方便,Vue也是这么做的)