vue3深度监听

在 Vue3 中，可以使用 `watch` 和 `watchEffect` 两种方式进行深度监听。

1. `watch`：可以手动指定监听对象，当指定的对象发生变化时，执行回调函数。若监听对象是一个对象，则需要设置 `deep: true` 才能进行深度监听。

<template>
  <div>{{ obj }}</div>
</template>

<script>
import { reactive, watch } from 'vue';

export default {
  setup() {
    const obj = reactive({ a: 1, b: 2 });

    watch(
      () => obj,
      (newObj, oldObj) => {
        console.log('obj changed', newObj, oldObj);
      },
      { deep: true }
    );

    return { obj };
  },
};
</script>

2. `watchEffect`：自动追踪数据依赖，并在其变化时执行回调函数。同样，若监听对象是一个对象，则需要设置 `deep: true` 才能进行深度监听。

<template>
  <div>{{ obj }}</div>
</template>

<script>
import { reactive, watchEffect } from 'vue';

export default {
  setup() {
    const obj = reactive({ a: 1, b: 2 });

    watchEffect(() => {
      console.log('obj changed', obj);
    }, { deep: true });

    return { obj };
  },
};
</script>