vue中watch如何对对象进行深度监听

对象的深度监听，watch提供了一个属性和方法：
handler：监听的对象发生变化后需要执行的方法；
deep：是否深度监听，默认为false;监听器会一层一层的向下遍历，给对象的每一个属性添加一个监听器。
所以在使用对对象的深度监听时，要注意是否对整个对象进行深度监听（这样会极大的消耗性能），还是对对象中的某个属性进行监听

<template>
  <div class="Watch">
    <p>年龄：{
    
    {
    
     age }}</p>
    <button @click="age++">增减年龄</button>
    <p>名字：{
    
    {
    
     person.name }}</p>
    <button @click="person.name='李四'">修改名字</button>
    <p>性别：{
    
    {
    
     person.sex }}</p>
    <button @click="person.sex='女'">修改性别</button>
  </div>
</template>

<script>
export default {
    
    
  name: "Watch",
  data() {
    
    
    return {
    
    
      age: 16,
      person: {
    
    
        name: "张三",
        sex: "男"
      }
    }
  },
  watch: {
    
    
    //普通监听
    age: function (newValue, oldValue) {
    
    
      console.log("普通监听");
      console.log(newValue);
      console.log(oldValue);
    },
    //  对象监听（普通监听---不行）
    /*    person: function (newValue, oldValue) {
          //点击“修改名字按钮”，名字改变了，但是没有触发监听的函数，所以没有打印出下面的值
          /!*console.log("对象监听");
          console.log(newValue);*!/
        }*/
    //对象深度监听：对整个对象都进行了监听，很消耗性能
    /*person: {
      handler(newValue, oldValue) {//需要具体执行的方法
        console.log(newValue);
      },
      deep: true//是否深度监听，默认为false;监听器会一层一层的向下遍历，给对象的每一个属性添加一个监听器
    }*/
    //对象深度监听：只监听对象中的某一个属性
    "person.name": {
    
    
      handler(newValue, oldValue) {
    
    //需要具体执行的方法
        console.log(newValue);
      },
      deep: true//是否深度监听，默认为false;监听器会一层一层的向下遍历，给对象的每一个属性添加一个监听器
    }
  }
}
</script>