computed 是「有缓存的算出来的值」,watch / watchEffect 是「数据变了就干活」。 下面四个现场:先看清 computed 到底省了什么,再试可写 computed、三种监听对象的区别,最后用 watchEffect + onCleanup 做一个 500ms 防抖。
| API | 要不要缓存 | 能不能拿旧值 | 依赖怎么来 | 典型场景 |
|---|---|---|---|---|
computed | 要:依赖不变不重算 | 不适用(它是取值,不是回调) | getter 里自动追踪 | 从已有数据推导展示用的新值 |
watch | 无(纯副作用) | 能:cb 里有 newValue / oldValue | 你显式指定监听谁 | 值变了发请求、打日志、联动外部库 |
watchEffect | 无(纯副作用) | 不能 | 运行时自动收集所有读到的依赖 | 依赖多又杂的副作用(配合 onCleanup 做防抖/取消请求) |