关于Vue中watch的一个小问题

Question

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

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

Answer 1

我这边写过一篇文章，尽管不是完全一样，但是希望可以帮你理解这个问题 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也是这么做的）