Vue 3 中 watch 和 watchEffect 的依赖收集差异:一次线上内存泄漏的排查记录
上个月我们后台管理系统的一个数据看板页面,在用户频繁切换筛选条件后,浏览器内存占用从 80MB 一路涨到 600MB 以上,页面明显卡顿,甚至偶发崩溃。这个页面用了 Vue 3 的 watch 监听筛选条件变化去请求接口,但代码里有一个容易被忽略的写法:在 watch 回调里又创建了一个 watchEffect。排查后发现,问题出在两套响应式 API 对依赖收集时机的处理差异上——watch 是惰性的,只在回调执行时追踪依赖,而 watchEffect 会立即执行并自动收集同步访问到的响应式数据。当嵌套使用且没有正确清理时,旧的监听器不会被销毁,依赖的 effect 一直挂在响应式对象的依赖列...