computed 的缓存、watch 的副作用

computed 是「有缓存的算出来的值」,watch / watchEffect 是「数据变了就干活」。 下面四个现场:先看清 computed 到底省了什么,再试可写 computed、三种监听对象的区别,最后用 watchEffect + onCleanup 做一个 500ms 防抖。

速查:computed / watch / watchEffect 怎么选

API要不要缓存能不能拿旧值依赖怎么来典型场景
computed要:依赖不变不重算不适用(它是取值,不是回调)getter 里自动追踪从已有数据推导展示用的新值
watch无(纯副作用)能:cb 里有 newValue / oldValue你显式指定监听谁值变了发请求、打日志、联动外部库
watchEffect无(纯副作用)不能运行时自动收集所有读到的依赖依赖多又杂的副作用(配合 onCleanup 做防抖/取消请求)
[迷你控制台] Vue 开发版的警告会同时显示在这里和浏览器控制台