vue 中 watch 对对象的深度监听

<p> 年龄：{{ age }}</p>

<button @click="age++">增加年龄</button>

<p> 名称：{{ person.name }}</p>

<button @click="person.name=='李四'">更改姓名</button>

export default{

  data(){

    return{

      age:20,

      person:{

        name:'张三'

      }

    }

  },

  watch:{

    //监听基本类型--只要发生操作会实时变化

    age(newVal,oldVal){

      console.log(newVal)

    },

    //普通监听--不能监听到复杂类型的

    person1(newVal){

      console.log(newVal)

    },

    //深度监听

    person(newVal){

      handler(newVal,oldVal){

        console.log(newVal)

      },

      deep:true //是否深度监听,默认false,监听会一层层往下遍历，给没一个对象属性增加一个监听器

    },

    //只监听对象中的某一个属性

    'person.name':{

      handler(newVal,oldVal){

        console.log(newVal)

      },

      deep:true //是否深度监听,默认false,监听会一层层往下遍历，给没一个对象属性增加一个监听器

    }

  }

}