vue2 watch 和vue3 watch 的区别

原创已于 2025-12-04 17:03:20 修改 · 424 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

于 2025-12-04 17:01:07 首次发布

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

1. ‌基本用法与语法‌

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

<template>
  <div>
    count: <input v-model="count" />
    name: <input v-model="user.name" />
    <br />
    <button @click="count++">+</button>
    <button @click="decrementCount">-</button>
    <button @click="resetUser">Reset User</button>
  </div>
</template>

<script>
export default {
  data() {
    return { 
      count: 0, 
      user: { name: 'John' } 
    };
  },
  watch: {
    count(newVal, oldVal) {
      console.log(`count changed from ${oldVal} to ${newVal}`);
    },
    'user.name': function(newVal, oldVal) {
      console.log(`name changed from ${oldVal} to ${newVal}`);
    },
    user: {
      handler(newVal, oldVal) {
        console.log('user changed:', newVal);
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    decrementCount() {
      this.count--;
    },
    resetUser() {
      this.user.name += '--';
    }
  }
};
</script>

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

<template>
  <div>
    count: <input v-model="count" />
    name: <input v-model="user.name" />
    <br />
    <button @click="count++">+</button>
    <button @click="changUser">修改user</button>

  </div>
</template>

<script setup lang="ts">
import { ref, reactive, watch } from 'vue';
const count = ref(0);
const user = reactive({ name: 'John' });
watch(count, (newVal, oldVal) => {
  console.log(`count changed from ${oldVal} to ${newVal}`);
});
watch(() => user.name, (newVal, oldVal) => {
  console.log(`name changed from ${oldVal} to ${newVal}`);
});

function changUser() {
  user.name = 'Tom';
}
</script>

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