watcheffect 是自动执行的副作用函数，定义时立即运行并动态追踪本次执行中访问的所有响应式数据，任一依赖变化即重执行；computed 是惰性求值的响应式值容器，仅在被读取且依赖变更时才重新计算并缓存结果。
watchEffect 是自动执行的副作用函数
watchEffect 的核心特点是：它本身既是依赖收集器，也是副作用执行器。定义时传入的函数会立即运行一次，在执行过程中自动读取所有响应式数据（比如 ref.value 或 reactive 对象的属性），Vue 就据此建立依赖关系。之后只要其中任意一个被读取的值变化，函数就重新执行。
这意味着你不用显式声明监听谁——它“看到什么就盯什么”。但这也带来风险：如果函数里意外读取了不该触发更新的数据（比如某个临时计算中间量），就会导致不必要的重复执行。
computed 是带缓存的派生值容器
computed 的 getter 函数也自动追踪依赖，但它不立即执行副作用，也不主动触发逻辑。它的目标只有一个：返回一个稳定的、可缓存的响应式值。只有当这个值被外界读取（比如在模板中使用或访问 .value）且其依赖已变更时，getter 才会执行并更新缓存结果。
关键区别在于：computed 不关心“谁用了我”，只关心“我的输入变了没”；而 watchEffect 关心的是“我这次运行时碰到了哪些响应式数据”。前者是惰性求值的值，后者是主动响应的逻辑块。
依赖收集时机和粒度不同
watchEffect 在每次执行时都会重新收集依赖——上一次执行读了 a 和 b，下一次执行如果只读了 a，那它就只依赖 a。这种动态性让它灵活，但也更难预测。
computed 的依赖在第一次求值后就固定下来，后续只要依赖树不变，就不会重新收集。即使你后来在 getter 中加了新字段，只要没被实际访问，就不会纳入依赖。这使得 computed 更稳定、更易推理。
举例来说：
- watchEffect(() => console.log(state.a, state.b)) → 每次都同时追踪 a 和 b
- watchEffect(() => { if (state.flag) console.log(state.a) }) → flag 为 false 时，只追踪 flag；为 true 时，才额外追踪 a
- computed(() => state.flag ? state.a : 0) → 无论 flag 值如何，从第一次求值起就同时追踪 flag 和 a
它们的返回值和用途根本不同
watchEffect 没有返回值，它存在的唯一意义就是执行副作用。你不能把它赋给变量再传递，也不能用在模板中直接渲染。
computed 返回一个 Ref，可以被读取、传递、组合、甚至作为 watch 的监听源。它的设计目标是“生成状态”，不是“触发动作”。正因如此，computed 内部严禁发请求、改路由、写 localStorage——这些都该交给 watch 或 watchEffect。
简言之：watchEffect 追踪的是“执行路径”，computed 追踪的是“求值表达式”。路径可变，表达式应稳定。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
