Vue 知识点：深度监视 deep

Vue 知识点：深度监视

深度监视：

1. vue中的watch默认不监测对象内部值的变化 （一层）
2. 配置deep:true 可以监测对象内部值的变化 （多层）

备注：

1. vue自身可以监测对象内部值的变化，但是vue提供的watch默认不可以监测对象内部值的变化
2. 使用watch时根据数据的具体结构，决定是否采用深度监视

//监视属性实现
<div id="root">
     <h2>a的值是：{{numbers.a}}</h2>
     <button @click="numbers.a++">点我让a+1</button>
     <h2>b的值是：{{numbers.b}}</h2>
     <button @click="numbers.b++">点我让b+1</button>
</div>

<script>
  const vm = new Vue({
       el:"#root",
       data:{
           numbers:{
              a:1,
              b:1,
           }
       },
       watch: {
          //监视多级结构中的某个属性的变化
          'numbers.a':{//监视对象
               handler() {
                 console.log('a修改了')
             }
           },
          //监视多级结构中的所有属性的变化
          numbers:{//监视对象
               deep: true,
               handler() {
                 console.log('numbers修改了')
             }
           }       
       }
   })
   
 // 方法二： vm.$watch =>这种写法，前提是确定有vue实例
  vm.$watch('isHot'//监视的对象,{
     immediate:true // 初始化时调用 handler
     //isHot 被改变时调用 handler
     handler(newValue,oldValue) {
         console.log('isHot被修改了',newValue, oldValue)
     }
  })