vue3中watch的详细用法

在 Vue3 中，watch 有以下几个用法：

1. watchEffect：立即执行一个响应式函数，并在响应式数据变化时再次执行该函数。

import { watchEffect } from 'vue';

watchEffect(() => {
  console.log('count:', count.value);
});

2. watch：监听指定响应式数据的变化，并在变化时执行相应的回调函数。

import { watch } from 'vue';

watch(count, (newValue, oldValue) => {
  console.log(`count 从 ${oldValue} 变为 ${newValue}`);
});

3. watch(source, callback, options)：监听指定响应式数据源的变化，并在变化时执行相应的回调函数。可以设置 deep 和 immediate 选项。

- deep：是否深度监听。
- immediate：是否在初始渲染时立即执行回调函数。

import { watch } from 'vue';

watch(
  () => ({ count: count.value, obj: obj.value }), 
  (newValues, oldValues) => {
    console.log(`count 从 ${oldValues.count} 变为 ${newValues.count}`);
    console.log(`obj 从 ${oldValues.obj} 变为 ${newValues.obj}`);
  }, 
  { 
    deep: true, 
    immediate: true 
  }
);

4. watchPostEffect：在组件渲染后执行一个响应式函数，并在响应式数据变化时再次执行该函数。

import { watchPostEffect } from 'vue';

watchPostEffect(() => {
  console.log('count:', count.value);
});

5. watchEffect 和 watch 的区别：

- watchEffect 可以自动追踪响应式数据的变化，不需要手动设置监听。
- watch 可以监听指定响应式数据的变化，且可以设置 deep 和 immediate 选项。