Vue watch怎么深度监听对象变化 ?

在 Vue 中，watch 可以用来观察和响应 Vue 实例上的数据变化。当你需要深度监听一个对象的变化时，你需要确保 Vue 能够检测到对象内部属性的变化。默认情况下，Vue 只能检测到对象属性的变化，而不能检测到对象内部嵌套属性的变化。

为了深度监听一个对象的变化，你可以使用 Vue 的 watch 选项，并为其提供一个深度监听器（deep watcher）。下面是一个示例：

<template>
  <div>
    <p>原始对象: {{ obj }}</p>
    <p>监听结果: {{ watchedObj }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      obj: {
        nestedObj: {
          value: 'initial value'
        }
      },
      watchedObj: ''
    };
  },
  watch: {
    obj: {
      handler(newVal, oldVal) {
        this.watchedObj = '对象发生变化';
      },
      deep: true // 深度监听
    }
  }
};
</script>

在上面的示例中，我们创建了一个名为 obj 的对象，并在 watch 选项中为它添加了一个深度监听器。deep: true 表示我们要深度监听 obj 对象的变化。当 obj 或其内部嵌套属性发生变化时，handler 函数将被调用，并接收到新旧值作为参数。在这个例子中，我们只是简单地将 watchedObj 的值设置为 '对象发生变化' 来演示监听效果。

通过使用深度监听器，你可以确保 Vue 能够检测到对象内部属性的变化，并在需要时执行相应的操作。