💡 Vue 中 computed 和 watch 的区别及用法总结 💡
最近在学习 Vue，发现 computed 和 watch 是两个超级常用的功能，但刚开始总是分不清它们的区别和用法。今天就来总结一下，帮助大家快速掌握！👇
1. computed（计算属性）
- 特点：
-
- 是基于依赖的 缓存，只有当依赖的响应式数据变化时才会重新计算。
- 必须返回一个值，适合用于 同步计算。
- 代码简洁，逻辑清晰。
- 使用场景：
-
- 需要根据某些数据动态计算出一个新值。
- 例如：购物车总价、过滤列表、格式化数据等。
示例：
const totalPrice = computed(() => {
return items.value.reduce((sum, item) => sum + item.price, 0);
});
2. watch（侦听器）
- 特点：
-
- 监听某个响应式数据的变化，执行 副作用（如异步操作、复杂逻辑）。
- 不会缓存结果，每次变化都会触发。
- 适合处理 异步 或 复杂逻辑。
- 使用场景：
-
- 需要在数据变化时执行某些操作（如发送请求、更新 DOM）。
- 例如：搜索框输入变化时请求数据、监听路由变化等。
示例：
watch(searchQuery, (newValue) => {
fetchData(newValue); // 搜索词变化时请求数据
});
3. computed vs watch 对比
| 特性 | computed | watch |
|---|---|---|
| 返回值 | 必须返回一个值 | 不需要返回值 |
| 缓存 | 有缓存，依赖不变不重新计算 | 无缓存，每次变化都触发 |
| 适用场景 | 同步计算、格式化数据 | 异步操作、复杂逻辑 |
| 性能 | 高效，适合频繁计算的场景 | 适合低频变化的场景 |
4. 如何选择？
- 用 computed：
-
- 当你需要根据某些数据动态计算一个新值，并且希望结果被缓存。
- 例如：
fullName = firstName + lastName。
- 用 watch：
-
- 当你需要在数据变化时执行某些操作（如异步请求、复杂逻辑）。
- 例如：监听搜索词变化并请求数据。
5. 一句话总结
- computed：我要一个值，你给我算出来，缓存好！
- watch：你变了，告诉我，我来处理！
🌟 小贴士
- 如果需要 异步计算，可以用
watch或者ref+ 异步函数。 - Vue 3 的
computed不支持异步，但可以用vue-use的computedAsync。
希望这篇总结能帮到你！如果有问题，欢迎评论区讨论哦～💬
