面试题：Vue中如何实现深度监听并解释其应用场景

如何设置Vue的侦听器来监听深层次变化

在Vue中，可以通过设置deep选项为true来实现对对象或数组深层次变化的监听。

假设我们有如下数据结构：

<template>
  <div>
    <button @click="changeNestedValue">改变嵌套值</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      myObject: {
        nested: {
          value: '初始值'
        }
      }
    };
  },
  watch: {
    myObject: {
      handler(newValue, oldValue) {
        console.log('myObject 发生了变化', newValue, oldValue);
      },
      deep: true
    }
  },
  methods: {
    changeNestedValue() {
      this.myObject.nested.value = '新值';
    }
  }
};
</script>

在上述代码中，watch选项里对myObject进行监听，设置deep: true，这样当myObject内部深层次的属性发生变化时，handler函数就会被触发。

深度监听在实际开发中的应用场景

数据同步与实时更新：在一个电商购物车功能中，购物车数据可能是一个包含多个商品对象的数组，每个商品对象又有嵌套的属性，如商品的数量、规格等。当用户修改某个商品的数量或者规格时，需要实时同步购物车总价等相关信息。通过深度监听购物车数据，可以及时捕捉这些深层次变化并更新相关的计算属性。
表单校验：如果表单数据是一个复杂的对象，包含多个嵌套的字段，并且某些字段的变化会影响到整个表单的校验状态。例如一个用户注册表单，其中有地址信息（省、市、区等嵌套结构），当用户修改某个地址层级时，需要重新校验地址的完整性等。深度监听可以确保在这些深层次字段变化时，触发相应的校验逻辑。

面试题：Vue中如何实现深度监听并解释其应用场景

知识考点

面试题答案

如何设置Vue的侦听器来监听深层次变化

深度监听在实际开发中的应用场景