watcheffect 不直接导致重复渲染，但易因修改自身依赖、监听高频状态或隐式追踪深层对象而引发副作用循环或过度响应；应改用 watch、computed 或读写分离策略。
watchEffect 本身不直接导致重复渲染，但它容易引发副作用循环或频繁触发更新逻辑，间接造成组件反复重绘。关键在于它会自动追踪内部所有响应式依赖，并在任一依赖变化时重新执行——如果执行体里又修改了这些依赖，就形成死循环；如果依赖变动太频繁（比如滚动、输入），也会让 watchEffect 过度响应。
别在 watchEffect 里改它自己追踪的值
这是最典型的循环源头。watchEffect 会把读取过的响应式字段自动加入依赖列表，一旦你在回调里给它赋新值，就会触发下一轮执行，无限下去。
- ❌ 错误写法：watchEffect(() => { count.value++ }) —— 每次执行都让 count 变，count 变又触发它再执行
- ✅ 正确做法：用 watch 替代，明确指定监听源和响应动作；或者把读写分离，用 computed + ref 封装派生逻辑，避免副作用混入追踪链
避免监听高频率变动的响应式状态
像 input 输入框的 value、滚动位置、鼠标坐标这类数据，每帧都可能变。watchEffect 一盯上它们，就会疯狂重跑。
- ❌ 不推荐：watchEffect(() => { el.scrollTop = state.scrollPos }) —— 滚动中持续触发
- ✅ 推荐：换成 watch，配合 debounce 或 throttle 控制频率；或用 flush: 'post' 确保 DOM 更新后才操作，减少中间态干扰
警惕隐式依赖和深层对象遍历
watchEffect 会递归收集所有被访问到的响应式属性。一个 reactive 对象哪怕只读了 obj.user.name，整个 obj 的变更都会触发它。大型对象或嵌套深的结构极易被“误伤”。
- ❌ 风险写法：watchEffect(() => console.log(user.profile.avatar)) —— user 整体更新（比如加了个 token 字段）也会触发
- ✅ 更安全：改用 watch(() => user.profile.avatar)，精准锁定路径；或对非必要响应式字段用 shallowRef / toRaw 脱离追踪
用 computed 替代 watchEffect 做纯计算
如果目的只是根据某些响应式值推导出另一个值（比如过滤列表、格式化时间），watchEffect 是错配工具——它没有缓存，每次依赖变都重算；而 computed 天然惰性+缓存，模板里多次引用也只算一次。
- ❌ 冗余写法：watchEffect(() => result.value = list.value.filter(x => x.active))
- ✅ 更优解：const filteredList = computed(() => list.value.filter(x => x.active))，模板直接用
{{ filteredList }}
