watch 深度监听

<template>
  <div class="about">
    <p>about</p>
    <span>{{obj.name}}</span>
    <button @click="handleName">改名</button>
  </div>
</template>

<script>
export default {
  data(){
    return{
      obj:{
        name:"告白气球",
        age:18
      }
    }
  },
  methods:{
    handleName(){
      this.obj.name='夏天的风'
    }
  },
  watch:{
    obj:{
     　handler(newValue, oldValue) {
　　　　　　console.log(newValue,oldValue)
　　　　},
　　　　deep: true，
　　　　immediate:true
    }
  }
}
</script>

总结：immediate:true 表示 watch 声明了 obj 后 就立即执行 handler 方法
deep 为 true 代表深度监听
上面这种写法是给 对象的 所有属性都加上了这个监听器，开销大
某个属性修改了都会触发这个监听器，可以使用如下方法

 watch:{
    'obj.name':{
     　handler(newValue, oldValue) {
　　　　　　console.log(newValue,oldValue)
　　　　},
　　　　deep: true,
       immediate:true
    }
  }