Vue 知识点：监视属性 - watch

Vue 知识点：监视属性 - watch

1. 当被监视的属性变化时，回调函数自动调用，进行相关操作 （以下指的是watch里的 handler）
2. 监视属性必须存在，才能进行监视
3. 监视的两种写法：
   （1）new Vue的时候传入watch配置
   （2）通过vm.$watch监视
4. 监视属性的简写前提是watch配置项里只有handler，不需要immediate，deep的配置

//监视属性实现
<div id="root">
     <h2>今天天气很{{info}}</h2>
     <button @click="changeWeather">切换天气</button>
</div>

<script>
  const vm = new Vue({
       el:"#root",
       data:{
           isHot:true
       },
       computed:{
          info() {
              return this.isHot ？ ‘炎热’ ： ‘凉爽’
          }
       },
       methods:{
           changeWeather() {
               this.isHot = !this.isHot
           }
       },
       //方法一: new Vue的时候传入watch配置
       watch: {
          **//监视属性的完整写法一：** 
          //这里不仅可以监视data里自定义的属性 (isHot)，也可以监视计算属性里属性 (info)
          isHot: { //监视对象
             immediate:true // 初始化时调用 handler
             //isHot 被改变时调用 handler
             handler(newValue,oldValue) {
                 console.log('isHot被修改了',newValue, oldValue)
             }
          },
          **//监视属性的简写形式一：**
          isHot(newValue,oldValue){
             console.log('isHot被修改了',newValue, oldValue)
          }
       }
   })
   
  // 方法二： vm.$watch =>这种写法，前提是确定有vue实例
  **//监视属性的完整写法一：** 
  vm.$watch('isHot'//监视的对象,{
     immediate:true // 初始化时调用 handler
     //isHot 被改变时调用 handler
     handler(newValue,oldValue) {
         console.log('isHot被修改了',newValue, oldValue)
     }
  })
  **//监视属性的简写形式二：**
  vm.$watch('isHot'//监视的对象,function(newValue,oldValue){
        console.log('isHot被修改了',newValue, oldValue)
  })
  
结论：
两种方法的区别：
方法一是创建vue实例时明确知道自己需要监视的对象
方法二是创建vue实例时不知道自己监视的对象，后续会根据用户的行为明确自己需要监视的对象的时候