vue watch 侦听器的权衡.md

# vue watch 侦听器的权衡 > 记录实习时一次发生的bug 在 Vue 3 中，`watch` 对数组、对象等‘引用类型’默认只比较**引用地址**： ```js watch( () => props.list, (val) => { // TODO } ) ``` 对 list 的监听只是地址，如：当父组件用 `splice` 原地修改数组时： > splice：在当前数组的基础上进行更改 > > 文档：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/splice ```js // 父组件 list.value.splice(idx, 1) // 原地删除，引用不变 ``` 子组件的 `watch` **不会触发** ——地址没变，不会触发更改。子组件仍内部保留旧数据，存在潜在的 bug ## 修复 #### 方案一：深层侦听 `{ deep: true }` ```js watch( () => props.list, (val) => { // TODO }, { deep: true } // 深度侦听 ) ``` 优缺： - ✅ 能解决问题 - ❌ 性能开销：递归遍历每个属性建立依赖，每次嵌套值变化都触发 - ❌ 语义错位：若只关心增删，但深层侦听会对每个状态的变化进行侦听，如： `item.status` 变化也要触发一次深拷贝，因此若只考虑增删，使用 deep 开销太大 #### 方案二： filter 返回新引用 filter 会返回新的数组，此时地址发生了改变 ```js // 父组件 list.value = list.value.filter((_, i) => i !== idx) // 新数组，新引用 ``` - ✅ 地址变了 →watch 自然触发 若只是对增删进行处理，建议将 `splice` 替换为`filter` ，只用一行代码，避免了 `deep: true` 带来的所有副作用