vue3 深度监听用法 watch watchEffect 详解

在 Vue 3 中，你可以使用 watch 和 watchEffect 进行深度监听。深度监听意味着你能够监控一个对象及其嵌套属性的变化。

使用 watch 进行深度监听

如果你想监听一个响应式对象的所有嵌套属性，可以使用 deep: true 选项。以下是一个示例：

<template>
  <div>
    <input v-model="user.name" placeholder="Name" />
    <input v-model="user.age" placeholder="Age" />
  </div>
</template>

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

export default {
  setup() {
    const user = ref({
      name: '',
      age: 0,
    });

    watch(
      user,
      (newValue, oldValue) => {
        console.log('User changed:', newValue);
      },
      { deep: true } // 深度监听
    );

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

使用 watchEffect

watchEffect 会立即执行并且在相关的响应式属性发生变化时重新执行。这种方法也支持深度监听，但不需要显式设置 deep: true：

<template>
  <div>
    <input v-model="user.name" placeholder="Name" />
    <input v-model="user.age" placeholder="Age" />
  </div>
</template>

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

export default {
  setup() {
    const user = ref({
      name: '',
      age: 0,
    });

    watchEffect(() => {
      console.log('User changed:', user.value);
    });

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

总结

• 使用 watch 时可以通过 { deep: true } 选项进行深度监听。
• watchEffect 会自动追踪依赖，适合快速监控响应式数据。

如果你有任何具体的用例或问题，欢迎分享！