面试题：Vue中watch的深度监听如何实现及应用场景

Question

在Vue中，当我们需要监听一个对象或数组的深层次变化时，应如何配置watch选项来实现深度监听？请举例说明深度监听的常见应用场景。

Answer 1

配置watch选项实现深度监听

在Vue中，通过设置deep属性为true来实现对对象或数组的深度监听。示例如下：

<template>
  <div>
    <button @click="changeObject">改变对象</button>
    <button @click="changeArray">改变数组</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      myObject: {
        name: '张三',
        age: 20
      },
      myArray: [1, 2, 3]
    };
  },
  watch: {
    myObject: {
      handler(newVal, oldVal) {
        console.log('myObject变化了', newVal, oldVal);
      },
      deep: true
    },
    myArray: {
      handler(newVal, oldVal) {
        console.log('myArray变化了', newVal, oldVal);
      },
      deep: true
    }
  },
  methods: {
    changeObject() {
      this.myObject.age = 21;
    },
    changeArray() {
      this.myArray[0] = 4;
    }
  }
};
</script>

常见应用场景

1. 数据缓存更新：当从缓存中读取一个复杂对象或数组，且该数据在应用的其他地方被修改时，通过深度监听，及时更新相关UI，避免用户看到过期数据。例如电商应用中购物车缓存数据，当购物车中某个商品的属性（如数量、价格等）变化时，能及时反映到购物车页面。
2. 动态表单校验：对于复杂的表单，其中包含对象嵌套或数组形式的字段。当用户修改表单中某个深层次的字段时，通过深度监听触发校验逻辑，实时提示用户输入是否合规。比如一个包含多个联系人信息的表单，每个联系人又有多个子字段，当用户修改其中一个联系人的某个子字段时，进行相关校验。
3. 实时数据同步：在多人协作的应用场景中，如在线文档编辑。当一个用户对文档中的复杂数据结构（如嵌套的段落、列表等组成的文档对象，或者多人操作的共享数组数据）进行修改时，通过深度监听及时将变化同步给其他用户，保持数据一致性。