Vue Computed属性不更新：未在data声明的属性为何无法触发响应式更新

问题核心原因：Vue 2的响应式实现机制限制 #

Vue 2基于Object.defineProperty实现响应式，组件初始化时会遍历data返回对象的所有显式声明的属性，给每个属性绑定专属的getter、setter：

• 读取属性时触发getter，收集依赖该属性的计算属性、视图渲染函数
• 修改属性时触发setter，通知所有依赖更新

两种属性的差异本质是有没有被做响应式劫持：

• minScore哪怕初始化值是undefined，只要在data里显式声明，就已经被Vue做了响应式代理。1秒后赋值this.minScore = 10会触发setter，通知计算属性score重新计算，视图同步更新为15。
• minScore2没有在data里预声明，初始化阶段完全没有被Vue处理。后续直接赋值this.minScore2 = 10，只是给组件实例新增了一个普通的JavaScript属性，没有对应的setter触发更新通知，依赖它的score2感知不到值变化，就一直停留在初始计算的NaN结果。

如果不想提前在data里声明属性，也可以用Vue 2提供的$set方法手动给新增属性做响应式绑定，示例：this.$set(this, 'minScore2', 10)。
另外Vue 3改用Proxy实现响应式，直接代理整个组件实例的响应式对象，不存在必须预声明属性的限制，也不会出现这类问题。

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