Vue3 computed 和 watch 有什么区别？

Question

仓乃文 · Accepted Answer

computed 和 watch 都用于响应式数据变化，但用途不同：computed 用于计算属性（自动缓存），watch 用于执行副作用（手动响应）。

computed（计算属性，自动缓存）：
```javascript
import { computed, ref } from "vue";

const firstName = ref("张");
const lastName = ref("三");

const fullName = computed(() => {
  console.log("计算中...");  // 只在首次或依赖变化时执行
  return firstName.value + lastName.value;
});

console.log(fullName.value);  // "张三"（触发计算）
console.log(fullName.value);  // "张三"（直接返回缓存，不触发计算）
```

watch（监听器，执行副作用）：
```javascript
import { watch, ref } from "vue";

const count = ref(0);
watch(count, (newValue, oldValue) => {
  console.log(`计数从 ${oldValue} 变为 ${newValue}`);
  if (newValue >= 10) alert("已达到上限");
});
```

watchEffect（立即执行的监听）：
```javascript
import { watchEffect, ref } from "vue";

const count = ref(0);
watchEffect(() => {
  console.log("当前计数:", count.value);  // 立即执行，自动收集依赖
  document.title = `计数: ${count.value}`;
});
```

补充说明：
- computed 有缓存，依赖不变时多次访问直接返回缓存值
- watch 不缓存，每次变化都执行回调，适合异步操作
- watchEffect 立即执行，适合需要即时运行一次的场景
- watch 支持深度监听：watch(obj, handler, { deep: true })