Vue 中的侦听器（Watch）与计算属性（Computed）：深度解析与最佳实践

一、侦听器（Watch）的核心作用

什么是侦听器？

核心特点

1. 关注“过程”而非“结果”：计算属性关注的是“根据 A 和 B 算出 C”，而侦听器关注的是“当 A 变化时，我要去做某件事”。
2. 支持异步操作：这是侦听器最强大的地方。你可以在回调中使用 async/await，发起 API 请求，或者设置定时器。
3. 访问新旧值：回调函数通常会接收两个参数：newValue（新值）和 oldValue（旧值），方便你进行差异对比。
4. 深度监听：通过配置 deep: true，可以监听对象内部嵌套属性的变化。

代码示例（Vue 3 Composition API）

1import { ref, watch } from 'vue';
2
3const searchQuery = ref('');
4const searchResults = ref([]);
5const isLoading = ref(false);
6
7// 侦听 searchQuery 的变化
8watch(searchQuery, async (newVal, oldVal) => {
9  if (!newVal) {
10    searchResults.value = [];
11    return;
12  }
13
14  isLoading.value = true;
15  try {
16    // 执行异步 API 请求
17    const response = await fetch(`/api/search?q=${newVal}`);
18    searchResults.value = await response.json();
19  } catch (error) {
20    console.error('Search failed', error);
21  } finally {
22    isLoading.value = false;
23  }
24});

二、计算属性（Computed） vs 侦听器（Watch）

1. 场景一：数据转换与派生 -> 选 Computed

1// ✅ 推荐：使用 Computed
2const expensiveProducts = computed(() => {
3  return products.value.filter(p => p.price > 100);
4});
5
6// ❌ 不推荐：使用 Watch
7// 你需要手动维护一个 expensiveProducts 数组，
8// 每次 products 变化时去更新它，代码冗余且容易出错。

• 声明式：你只需要定义“什么是昂贵的商品”，Vue 会自动处理依赖追踪。
• 性能：如果模板中引用了 expensiveProducts 十次，计算属性只会运行一次（除非依赖变了），而侦听器可能会触发多次不必要的逻辑。

2. 场景二：副作用与异步操作 -> 选 Watch

1// ✅ 推荐：使用 Watch
2watch(userId, async (newId) => {
3  if (!newId) return;
4  loading.value = true;
5  userData.value = await fetchUser(newId); // 异步操作
6  loading.value = false;
7});
8
9// ❌ 错误：试图在 Computed 中做这件事
10// const userData = computed(async () => { ... }) 
11// 计算属性不能返回 Promise 供模板直接使用，且不能在内部执行副作用。

三、深度辨析：什么时候该用哪个？

1. 遵循“计算属性优先”原则

• 原因：计算属性具有缓存机制，能显著提升性能；同时它的代码更加简洁、可读性更强，符合函数式编程的“纯函数”理念（无副作用）。
• 反例：不要为了修改另一个变量而去写计算属性。
  javascript

  编辑

  1// ❌ 坏味道
  2const fullName = computed(() => {
  3  fullMessage.value = firstName.value + ' ' + lastName.value; // 在 computed 中产生副作用
  4  return firstName.value + ' ' + lastName.value;
  5});

2. 侦听器的进阶用法

• immediate: true：
  默认情况下，侦听器只在数据变化时触发。如果你需要在组件挂载时立即执行一次逻辑（例如初始化加载数据），可以开启此选项。
  javascript

  编辑

  1watch(myData, handler, { immediate: true });

• deep: true：
  用于监听对象内部属性的变化。注意，深度监听性能开销较大，尽量避免对大型对象进行深度监听，最好精确监听具体的子属性（如 watch(() => obj.prop, handler)）。
• flush: 'post'：
  默认侦听器在组件更新前触发。如果你需要在 DOM 更新之后执行逻辑（例如获取更新后的 DOM 元素尺寸），可以将 flush 设置为 'post'。

四、总结与建议

最佳实践口诀

派生数值用 Computed，异步副作用靠 Watch。
能用缓存别重算，代码清晰易维护。