Vue Watch Deep Property

在 Vue 中，我们经常需要监听某个对象的深度属性的变化，以作出相应的响应。针对这种需求，Vue 提供了 watch属性的功能，它可以监听对象的深度属性的变化，从而触发相应的响应函数。

使用 watch 监听对象深度属性变化

示例代码

假设我们有一个包含学生信息的对象，涉及学生的姓名、年龄和学习成绩信息。我们希望当学生的成绩信息发生变化时，能够触发相应的响应函数。可以如下实现：

const vm = new Vue({
  data: {
    student: {
      name: '张三',
      age: 20,
      score: {
        math: 90,
        english: 80,
        chinese: 70
      }
    }
  },
  watch: {
    'student.score': {
      handler: function (newVal, oldVal) {
        console.log(`学生的成绩发生变化：${JSON.stringify(newVal)} => ${JSON.stringify(oldVal)}`);
      },
      deep: true
    }
  }
});

上述代码中，我们使用 watch 属性监听了 student.score 的变化，并设置了 deep: true，表示监听深度属性的变化。当学生的成绩信息发生变化时，将触发相应的响应函数。

此时我们可以修改学生的某门课程成绩，触发相应的响应函数：

vm.student.score.math = 95;  // 学生的成绩发生变化：{"math":95,"english":80,"chinese":70} => {"math":90,"english":80,"chinese":70}

watch 配置项

在上文的代码中，我们使用了 watch 的配置项 handler 和 deep。下面我们来具体了解一下 watch 的其它配置项。

handler

handler 是 watch 的一个必选配置项，用来定义属性变化后的响应函数。响应函数包含两个参数，分别是属性变化后的新值 newVal 和属性变化前的旧值 oldVal。

deep

通过 deep 配置项，可以指定是否监听深度属性的变化。如果需要监听深度属性的变化，需要将 deep 设置为 true，否则只能监听浅层属性的变化。

immediate

immediate 配置项用来指定响应函数是否需要在组件初始化时立即调用一次。设置为 true，则在组件初始化时就会调用相应的响应函数，否则需要等到属性发生变化后才会调用。

总结

通过 watch 属性可以方便地监听对象的深度属性的变化，当属性发生变化时，可以触发相应的响应函数，从而实现对数据的动态响应。在使用 watch 进行深度监听时，需要注意不要在响应函数中修改监听的属性，否则容易导致循环调用，进而导致页面出现某些异常问题。