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;监听器会一层一层的向下遍历，给对象的每一个属性添加一个监听器
      immediate:true, // 初始化监听
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54