告别选择困难：mini-vue中computed与watch的实战抉择指南
项目地址: https://gitcode.com/gh_mirrors/mi/mini-vue 在开发响应式应用时，你是否曾困惑于何时该用computed（计算属性），何时该用watch（侦听器）？本文将通过mini-vue的源码解析和实际场景对比，帮你精准掌握两者的适用边界，提升代码效率与可维护性。读完本文你将明确：computed的缓存机制如何优化性能，watch的异步处理能力如何解决复杂场景，以及如何通过源码级理解做出最佳技术选型。
核心差异：从源码看设计理念
computed：缓存驱动的依赖计算
computed的核心设计目标是高效的衍生状态计算。在packages/reactivity/src/computed.ts中，其实现通过_dirty标志位和调度器（scheduler）实现了智能缓存：
// 核心缓存逻辑
get value() {
trackRefValue(this);
if (this._dirty) { // 只有当依赖变化时才重新计算
this._dirty = false;
this._value = this.effect.run(); // 执行用户定义的 getter 函数
}
return this._value;
}
测试用例computed.spec.ts验证了这一机制：当依赖未变化时，多次访问value属性不会触发重复计算，有效减少了不必要的性能开销。
watch：事件驱动的响应式监听
与computed不同，watch专注于对数据变化做出反应。在packages/runtime-core/src/apiWatch.ts中，其通过调度器（scheduler）实现了异步响应能力：
// 异步执行逻辑
const scheduler = () => queuePreFlushCb(job); // 加入预刷新队列
const effect = new ReactiveEffect(getter, scheduler); // 响应式副作用
这种设计使watch非常适合处理数据变化后的复杂操作，如API调用、DOM更新等异步任务。
适用场景对比：决策流程图
以下是基于mini-vue实现特性的决策指南：
| 场景类型 | computed适用 | watch适用 | 核心优势 |
|---|---|---|---|
| 数据格式化 | ✅ 价格计算、姓名拼接 | ❌ 低效且冗余 | 自动缓存、声明式语法 |
| 依赖联动 | ✅ 购物车总价计算 | ⚠️ 需手动维护依赖 | 自动追踪依赖关系 |
| 异步操作 | ❌ 不支持异步返回 | ✅ API请求、定时器 | 支持异步/清理逻辑 |
| 数据转换 | ✅ 列表过滤排序 | ⚠️ 需手动处理新旧值 | 即时响应、自动更新 |
| 复杂逻辑 | ⚠️ 计算密集型需谨慎 | ✅ 分步处理复杂流程 | 支持条件执行、流程控制 |
实战案例：购物车功能实现
computed实现商品总价计算
在电商场景中，购物车总价需要根据商品数量和单价动态计算，此时computed的缓存特性能显著优化性能：
// 商品总价计算（computed最佳实践）
const cart = reactive({
items: [{ price: 10, quantity: 2 }, { price: 20, quantity: 1 }]
});
const totalPrice = computed(() => {
return cart.items.reduce((sum, item) => {
return sum + item.price * item.quantity;
}, 0);
});
console.log(totalPrice.value); // 首次计算：40
cart.items[0].quantity = 3; // 依赖变化触发重新计算
console.log(totalPrice.value); // 缓存失效：50
watch实现库存预警通知
当商品库存低于阈值时发送通知，watch的异步处理能力在此场景下更为适合：
// 库存预警（watch最佳实践）
const product = reactive({ stock: 10 });
watchEffect((onCleanup) => {
const timer = null;
if (product.stock < 5) {
// 发送库存预警API
timer = setTimeout(() => {
console.log("库存不足，请及时补货");
}, 1000);
}
// 清理函数：防止多次触发
onCleanup(() => {
clearTimeout(timer);
});
});
product.stock = 3; // 触发预警通知
性能优化：避免常见陷阱
computed的使用误区
-
过度计算：避免在computed中执行复杂逻辑或API调用，这会阻塞渲染流程。
-
依赖滥用：不要依赖多个不稳定的数据源，这会导致缓存频繁失效。
watch的优化策略
-
合理设置flush时机：根据场景选择
pre（默认）、post或sync模式。 -
及时清理副作用：使用
onCleanup处理定时器、事件监听等资源释放。
源码级理解：实现机制对比
computed的响应式链路
watch的事件响应流程
选型决策树
遇到选择困难时，可通过以下决策路径快速判断：
- 是否需要派生新值？→ 是 → computed
- 是否需要异步操作？→ 是 → watch
- 是否需要副作用处理？→ 是 → watch
- 是否需要缓存结果？→ 是 → computed
- 是否需要手动控制执行时机？→ 是 → watch
通过mini-vue的源码解析和场景对比，我们可以清晰看到：computed是"声明式的状态派生"，而watch是"命令式的事件响应"。合理使用两者组合，能让你的响应式代码更高效、更易维护。建议在实际开发中，优先考虑computed处理纯计算逻辑，将watch保留给复杂的副作用处理场景。
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
