vue2 watch 和vue3 watch 的区别

Vue 2 和 Vue 3 中的 watch 机制在核心功能上相似，但语法、灵活性和底层实现有显著差异。以下是主要区别的详细对比：

1. ‌基本用法与语法‌

• ‌Vue 2 ‌：watch 是一个选项（option），通常作为组件配置对象中的一个属性。它是一个对象，键是需要监听的数据表达式，值是回调函数或包含选项的对象。‌

  • 例如：

• ‌Vue 3 ‌：watch 是一个函数，需要从 vue 库中导入。它更灵活，支持监听 ref、reactive 对象、getter 函数等多种数据源。‌

• 例如：

2. ‌监听源的指定方式‌

• ‌Vue 2‌：必须明确指定监听的数据源（如 count 或 'user.name'），支持字符串路径监听对象属性。‌
• ‌Vue 3‌：支持更灵活的监听源，包括：
  • ref 对象（如 count）。
  • reactive 对象（如 user，默认深度监听）。
  • getter 函数（如 () => user.name），允许监听复杂表达式。‌

例如，监听多个源：

watch([() => count.value, () => user.name], ([newCount, newName], [oldCount, oldName]) => {
  console.log(`count: ${newCount}, name: ${newName}`);
});

3. ‌立即执行与副作用处理‌

• ‌立即执行 ‌：
  • Vue 2 的 watch 默认惰性执行（仅在数据变化时触发），但可通过 immediate: true 选项初始化时执行一次。‌12
  • Vue 3 的 watch 同样默认惰性，但 immediate 选项用法一致。‌13
• ‌副作用清理 ‌：

  • Vue 3 的 watch 支持在回调中使用 onCleanup 函数清理副作用（如取消定时器或网络请求），避免内存泄漏。‌

    watch(data, async (newVal, oldVal, onCleanup) => {
    let cancelled = false;
    onCleanup(() => { cancelled = true; });
    const result = await fetchData(newVal);
    if (!cancelled) { /* 处理结果 */ }
    });

4. ‌与 watchEffect 的关系‌

• ‌Vue 2 ‌：没有 watchEffect，需使用 watch 配合 immediate: true 模拟类似行为。‌45
• ‌Vue 3 ‌：引入 watchEffect，它会立即执行一次并自动追踪依赖，无需指定监听源。但 watchEffect 无法获取变化前的值（oldVal），而 watch 可以。‌34
  • 适用场景：
    • watch：需要区分新旧值或精细控制监听源时。
    • watchEffect：依赖较多且只需执行副作用（如 API 调用）时，代码更简洁。‌4

5. ‌性能优化与最佳实践‌

• ‌避免深度监听 ‌：Vue 3 中监听 reactive 对象默认深度监听，但建议仅监听必要属性以提升性能。‌