Vue3里computed怎么实现深度监听？这些细节你得搞懂

terry 6小时前阅读数 51 #SEO

文章标签 Vue3 computed

修改了对象里的嵌套属性,可依赖它的computed却没更新？这大概率和“computed的深度监听逻辑”有关，今天咱们就把Vue3 computed的依赖跟踪、深度响应场景、实现方法这些细节掰碎了讲。

computed的依赖是怎么“听”到变化的？

Vue3里,computed本质是懒执行的响应式计算属性，它的更新逻辑靠“依赖收集”驱动：当computed函数里访问响应式数据（比如reactive包装的对象、ref包装的值）时，Vue会把这些“读取操作”记为computed的依赖；等这些依赖的数据被修改时，Vue就会触发computed重新计算。

举个简单例子：

const state = reactive({ count: 0, info: { name: '张三', age: 18 } })  
const doubleCount = computed(() => state.count * 2)

这里doubleCount的依赖是state.count——只有state.count被修改时，doubleCount才会更新，如果此时修改state.info.age，doubleCount完全没反应，因为它的计算逻辑里没碰过state.info相关的属性，自然不会把state.info的变化当成依赖。

什么时候需要“深度监听”？

先看个实际需求：用computed生成用户信息的描述文本，需要包含name和age，如果代码写成这样：

const userDesc = computed(() => {  
  return `用户叫${state.info.name}，年龄${state.info.age}岁`  
})

这时候userDesc的依赖是state.info.name和state.info.age——所以不管是state.info.name还是state.info.age变化，userDesc都会更新，看起来像是“深度响应”了嵌套属性？

但如果计算逻辑里只访问外层对象，问题就来了，比如拆成两个computed：

const userInfo = computed(() => state.info)  
const userDesc = computed(() => {  
  return `用户叫${userInfo.value.name}，年龄${userInfo.value.age}岁`  
})

此时userInfo的依赖是state.info（因为它的计算函数里只访问了state.info这个对象），当state.info.name变化时，state.info的引用没变化（还是同一个对象），所以userInfo不会更新，连带着userDesc也跟着“哑火”——这就是浅层依赖导致的更新丢失，这时候就需要让computed能“深度”感知对象内部的变化。

怎么让computed实现“深度监听”效果？

Vue3的computed本身没有deep选项（不像watch有deep: true），但可以通过主动访问深层属性或手动触发更新来实现类似效果。

方法1：计算函数内显式访问所有深层依赖

回到刚才拆分的例子,只要让userInfo的计算函数“碰”到深层属性，依赖就能被正确收集：

const userInfo = computed(() => {  
  // 显式访问name和age，让依赖收集到这两个属性  
  const { name, age } = state.info  
  return state.info  
})

这样userInfo的依赖就包含state.info.name和state.info.age，后续不管是name还是age变化，userInfo都会更新，userDesc自然也能跟着更新。

原理：Vue的响应式系统（基于Proxy）会在属性被访问时收集依赖，只要计算函数里“碰”到了深层属性，依赖就会被绑定到这些属性上，自然能响应它们的变化。

方法2：用watch配合computed，手动触发更新

如果深层属性太多,逐个访问太麻烦，可以用watch监听深层变化，再手动触发computed更新。

const userInfo = computed(() => state.info)  
watch(  
  () => state.info,  
  () => {  
    // 当info内部任意属性变化时，手动标记userInfo为“需要重新计算”  
    userInfo.effect?.schedule()  
  },  
  { deep: true } // 开启watch的深度监听  
)

这里利用了computed的effect属性（Vue3暴露的内部API），调用schedule()能强制让computed重新计算，不过要注意：effect是内部API，未来版本可能变动，生产环境得谨慎用。

方法3：把深层对象转成ref，用.value强制触发依赖

如果对象是用ref包装的（比如const info = ref({ name: '...' })），修改info.value.name时，info的value引用没变化，依赖info的computed不会更新，这时候可以在计算函数里直接访问深层属性：

const info = ref({ name: '张三', age: 18 })  
const userDesc = computed(() => {  
  return `用户叫${info.value.name}，年龄${info.value.age}岁`  
})

这里userDesc的依赖是info.value.name和info.value.age——访问info.value.name时，会先触发info.value的getter（因为info是ref，.value会触发get），再触发info.value这个对象的name属性的getter，所以依赖能收集到深层属性。

computed的“深度监听”和watch的deep有啥区别？

很多同学会把这两个概念搞混,这里直接对比核心差异：

watch的deep: true：会递归遍历对象的所有属性，给每个属性都加上依赖监听，哪怕你没在回调里访问深层属性，只要对象内部有变化，watch就会触发，优点是“一键深度监听”很方便，缺点是性能消耗大（递归遍历+大量依赖收集）。
computed的“深度响应”：完全依赖计算函数里访问了哪些属性，只有被访问到的属性变化时，computed才会更新，优点是性能更优（只跟踪用到的属性），缺点是需要手动确保计算函数“碰”到了所有需要响应的深层属性。

举个性能例子：如果有个大对象{ a: { b: { c: ... } }, d: ... }，用watch+deep会监听a、a.b、a.b.c、d等所有属性；而computed只监听计算函数里用到的属性（比如只用到a.b.c，就只监听它）。

常见坑点：以为computed能自动深度响应，结果不更新

很多新手会犯一个错误：计算函数里只访问外层对象，却期望内层属性变化时computed更新，比如操作数组：

const state = reactive({ list: [1, 2, 3] })  
const listLen = computed(() => state.list) // 只访问list，没访问length或元素  
// 然后修改list的元素：state.list[0] = 10

这时候listLen不会更新——因为state.list的引用没变化（数组还是同一个数组，只是元素变了），要让listLen响应数组元素变化，得让计算函数访问数组的length或具体元素：

const listLen = computed(() => state.list.length)  
// 或者访问元素：state.list[0], state.list[1]等

这样当数组元素变化时（比如state.list.push(4)或state.list[0] = 10），list.length会变化，自然能触发listLen更新。

computed深度监听的核心逻辑

要让computed响应深层数据变化,关键是让计算函数主动“触碰”到所有需要响应的深层属性，Vue的响应式系统是“访问时收集依赖，修改时触发更新”，所以只要计算函数里访问了深层属性，依赖就会被正确绑定，自然能实现“深度监听”的效果。

如果不想手动访问所有深层属性,也可以结合watch的deep选项手动触发computed更新，但要注意性能和API稳定性，还要区分reactive和ref的响应式差异：reactive对对象是深度代理（修改深层属性会触发响应），但computed的依赖是“你访问了什么就监听什么”；ref对对象的.value是浅层代理（修改.value内部属性不会触发ref的更新，除非访问.value的深层属性）。

实际开发中,建议优先选择“计算函数内显式访问深层属性”的方案——如果深层属性少，直接访问最稳妥；如果属性多且嵌套深，可以用watch+deep配合手动触发；如果是数组，记得访问length或元素来确保依赖收集，把这些逻辑理清楚，就再也不怕computed“深度监听”踩坑啦～