Vue嵌套数据更新时是否会触发computed计算属性重新计算？

“嵌套对象更新时计算属性不会更新”的说法是片面的，属于对Vue响应式机制的误解，实际是否触发计算属性更新，和Vue版本、你执行的更新操作类型直接相关。

不同版本的实际表现 #

Vue3 场景 #

Vue3基于Proxy实现响应式，会对所有嵌套的对象、数组自动做递归代理。只要你修改的是初始化时就声明在data里的响应式数据属性，不管嵌套层级多深，都能被响应式系统捕获。
你示例中的sameExample计算属性依赖了顶层的example对象，只要对example内部的嵌套数据做合法的属性修改、数组操作，都会触发该计算属性重新计算，不存在嵌套层级导致的监听失效问题。

Vue2 场景 #

Vue2基于Object.defineProperty实现响应式，天生存在两类监听限制：

• 无法监听对象未预先声明的新增属性、删除属性操作
• 无法监听通过索引直接修改数组元素、直接修改数组长度的操作

除此之外，对已经预先声明过的嵌套属性做修改，比如执行this.example[0].myObject.foo3.foo4 = 'newValue'，完全可以被监听到，也会触发计算属性更新。只有当你执行的是上述两类Vue2无法监听的操作时，才会出现计算属性不更新的情况，这种时候可以用this.$set或者数组的splice等变异方法操作，确保响应式生效。

针对你提供的示例代码的结论 #

你给出的示例代码（已补全语法缺失符号）如下：

data() {
    return {
        example: [
          { 
           myArray : ['foo1', 'bar1'],
           myObject: {
               "foo2": "bar2",
               "foo3": {
                    "foo4": "bar4"
               }
           }
        ]
    }
},
computed: {
    sameExample() {
        return this.example
    }
}

只要你对example嵌套数据的修改是当前Vue版本响应式系统可识别的操作，就会触发sameExample的重新计算，不存在“所有嵌套修改都不会触发计算属性更新”的情况。

内容的提问来源于stack exchange，提问作者mark mark