根本原因在于watchEffect不能也不该出现在computed的getter中，因为computed要求纯函数无副作用，而watchEffect本质是副作用注册器，二者语义与生命周期冲突，嵌套会导致依赖错乱或静默失败。
计算属性里直接用 watchEffect 不生效，根本原因在于：它根本不能也不该出现在 computed 的 getter 函数中。
watchEffect 不是计算属性的组成部分
computed 的作用是声明一个派生值，它的 getter 必须是纯函数——只读取响应式数据、返回新值，不产生任何副作用（如发请求、改状态、操作 DOM）。而 watchEffect 的本质是副作用注册器，它会立即执行并建立依赖追踪，用于触发异步或非响应式逻辑。两者语义和生命周期完全不同。
把 watchEffect 写进 computed 里，相当于在“求一个值”的过程中强行塞入一段需要监听和重执行的逻辑，这违背了 Vue 响应式系统的设计契约：
- computed getter 只应做同步计算，不能触发额外的 effect 链
- watchEffect 有自己的依赖收集时机和清理机制，嵌套在 getter 中会导致依赖错乱、重复注册或无法卸载
- Vue 不会对 computed 内部的 watchEffect 做特殊处理，它可能被忽略、静默失败，或在错误时机执行
正确嵌套姿势：分离关注点
想让“基于某计算结果的副作用”生效，必须把计算逻辑和副作用逻辑拆开，各自放在合适的位置：
- 用 computed 派生中间状态：比如过滤后的列表、格式化后的标题、是否启用某功能的布尔值
- 用 watchEffect 监听这个计算值：在 setup 或 onMounted 等生命周期中独立调用，明确表达“当这个值变化时，我要做 X”
示例（Vue 3）：
✅ 正确写法const filteredList = computed(() => props.list.filter(item => item.active));<br>watchEffect(() => {<br> if (filteredList.value.length === 0) {<br> showEmptyTip.value = true;<br> } else {<br> showEmptyTip.value = false;<br> }<br>});
为什么你可能会误以为要嵌套？
常见误解场景包括：
- 想在计算属性内部“自动请求接口”——应该用 watchEffect 监听触发条件，而非塞进 getter
- 认为“计算完就要立刻更新某个 ref”——这属于副作用，应由 watchEffect 或 watch 承担
- 试图用 computed + watchEffect 实现“懒加载式监听”——实际只需 watchEffect 直接监听原始响应式源，更清晰可靠
替代方案对比
若目标是“某值变化后执行逻辑”，优先按此顺序考虑：
- 仅需响应式依赖 + 立即执行 → 用 watchEffect
- 需区分新旧值 / 仅在变化后执行 / 需手动停止 → 用 watch
- 只是加工数据用于模板或其它逻辑 → 用 computed
三者各司其职，混用反而破坏响应式可预测性。
