Vue响应式不一致问题：computed多次赋值为何不每次触发getter

示例1（计算属性场景）输出逻辑 #

示例1中myProp是Vue声明的计算属性，它本身遵循惰性求值+异步批量更新的规则：

• 计算属性的getter仅在两个条件同时满足时才会执行：① 它依赖的响应式数据发生了变化；② 有主动读取该计算属性的操作
• created钩子内三次给myProp赋值，只会依次触发计算属性的setter，每次setter修改响应式数据myPropInternal后，Vue会将依赖该数据的渲染Watcher推入异步更新队列，且会自动对队列内的重复Watcher做去重，三次修改仅会保留一次更新任务
• 等created内的同步代码全部执行完毕后，Vue才会执行异步更新队列的渲染任务，此时模板渲染需要读取myProp的值，才会触发一次getter，拿到最终值3，因此输出三次set日志+一次get 3日志。

示例2（原生访问器属性场景）输出逻辑 #

示例2中myObject.myProp是原生定义的访问器属性，Vue2在把该对象转为响应式数据时，会对原有的访问器做包装，逻辑和计算属性完全不同：

• 初始化阶段Vue遍历data内的对象属性做响应式转换时，会主动读取myProp的值做校验，因此开头会输出两次get 0日志
• 每次给myObject.myProp赋值时，会先触发你定义的原生setter输出set日志，之后Vue内部需要读取属性的最新值和旧值做全等对比，判断是否需要触发更新通知，这个内部读取操作会直接触发你定义的原生getter，因此每次赋值后立刻会输出对应get日志
• 最后渲染阶段读取myProp的值，还会再输出一次get 3，最终的日志顺序和你看到的完全一致。

两者核心差异 #

Vue计算属性是框架层面封装的高性能属性，默认会做批量更新、惰性求值的优化，避免不必要的重复计算；而原生访问器属性被Vue响应式包装后，所有读取操作（包括框架内部的校验、对比操作）都会直接触发原生getter，不会做惰性求值的优化，因此会出现每次赋值都立刻触发get的表现。

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