vue3——watchEffect 和watch

watchEffect

watchEffect 会立即执行传入的函数，并且当函数中依赖的响应式状态发生变化时，它会再次执行。

import { reactive, watchEffect } from 'vue';

const state = reactive({ count: 0 });

watchEffect(() => {
  console.log(`count is: ${state.count}`);
});
// 当 state.count 改变时，会自动打印新的 count 值

watchEffect 自动追踪函数中所使用的响应式依赖项，并且在依赖项发生变化时重新运行函数。你不需要显式声明你要观察哪些依赖项，Vue 会自动处理。

watch

与 watchEffect 不同，watch 需要明确指出哪些响应式源（reactive sources）或 getter 函数需要被观察，并且允许你访问变化之前和之后的值。

import { reactive, watch } from 'vue';

const state = reactive({ count: 0 });

watch(
  () => state.count, // 指定一个 getter 函数来指明具体要观察的响应式属性
  (newValue, oldValue) => {
    // 这个回调函数会在依赖项改变时被调用
    console.log(`count changed from ${oldValue} to ${newValue}`);
  }
);
// 当 state.count 改变时，会调用回调函数并传入新旧值

watch 的第一个参数可以是一个 getter 函数，也可以是一个包含多个响应式值的数组。第二个参数是一个回调函数，它接收新值和旧值作为参数。

Cleanup

另外，watchEffect 和 watch 都支持一个清理（cleanup）机制。在副作用函数内部，你可以注册一个清理函数，该函数会在副作用函数重新执行之前调用，用于清理或注销之前的副作用（如定时器、订阅等）。

watchEffect((onCleanup) => {
  const timer = setInterval(() => {
    console.log(`count is: ${state.count}`);
  }, 1000);
  
  onCleanup(() => {
    clearInterval(timer);
  });
});

在这个例子中，onCleanup 函数用于在下一个副作用运行之前清除定时器。

watchEffect 和 watch 都是强大的响应系统特性，允许你以声明式的方式对应用状态进行精细控制。在实际开发中，选择哪一个取决于你的具体场景和需求。