一、现象重现：直接修改对象属性导致的视图异常
1.1 代码示例
在 Vue 2 项目中，我们常使用 reactive 或 data 来定义响应式对象。尝试直接通过点符号给对象添加新属性，往往会发现界面未更新。
import { reactive } from 'vue';
const state = reactive({
name: 'Vue',
count: 0
});
// 尝试直接添加属性
state.version = '3.0';
// 控制台查看结果
console.log(state.version); // '3.0'
console.log(state.$data); // version 并未出现在响应式数据中
1.2 现象分析
当你在控制台查看 state 对象时，你会发现新增的 version 属性确实存在于对象上，但它在 Vue 的响应式系统中是“不可见”的。Vue 的模板 {{ version }} 不会渲染出 '3.0'。这让人感到困惑，明明属性有了，为什么界面不刷新？
二、核心原理：Vue 的响应式系统局限性
2.1 Vue 2 的 Object.defineProperty
Vue 2 使用 Object.defineProperty 来劫持对象的属性。在初始化 Vue 实例时，它会递归遍历 data 中的所有属性，并将它们转换为 getter/setter。
当你给对象添加新属性时，这个新属性并没有经过 Object.defineProperty 的处理。因此，Vue 无法追踪到这个新属性的变化，也就无法触发视图的更新。
2.2 Vue 3 的 Proxy (部分支持但需注意)
Vue 3 使用 Proxy 代理整个对象，它拦截了对象属性的读取、设置等操作，不再局限于 Object.defineProperty。
在 Vue 3 中，通过 reactive 包装的对象，Proxy 默认通过 has 拦截器处理属性访问，使得添加新属性通常是响应式的。但在某些特定边缘场景或为了保持 API 的一致性，我们依然推荐使用 Vue.set 风格的 API。然而，理解 Vue 2 的局限性对于理解底层原理至关重要。
三、解决方案：如何正确添加响应式属性
3.1 使用 Vue.set 或 this.$set
这是最直接的解决方案。Vue.set(target, propertyName, value) 作用是将属性添加到响应式对象上并触发更新。在 Vue 2 组件实例中，也可以使用 this.$set。
import { reactive } from 'vue';
const state = reactive({ name: 'Vue' });
Vue.set(state, 'version', '3.0');
3.2 使用 Object.assign 或 展开运算符 (ES6)
通过重新赋值的方式，我们可以触发响应式系统的更新。虽然不能直接给对象添加属性，但我们可以创建一个新对象，包含原有属性和新属性，然后将新对象赋值给原变量。
方案 A：展开运算符
const state = reactive({ name: 'Vue' });
state = { …state, version: '3.0' };
方案 B：Object.assign
const state = reactive({ name: 'Vue' });
Object.assign(state, { version: '3.0' });
3.3 reactive 包装包装对象
如果你需要添加大量属性，或者不确定属性是否会存在，建议在添加属性之前确保根对象已经被 reactive 包装。
import { reactive } from 'vue';
const state = reactive({});
state.user = reactive({ name: 'Tom' });
// 此时 user 是响应式的
四、解决思路流程图
#publish-mermaid-1785466494290-0{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#publish-mermaid-1785466494290-0 .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#publish-mermaid-1785466494290-0 .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#publish-mermaid-1785466494290-0 .error-icon{fill:#552222;}#publish-mermaid-1785466494290-0 .error-text{fill:#552222;stroke:#552222;}#publish-mermaid-1785466494290-0 .edge-thickness-normal{stroke-width:1px;}#publish-mermaid-1785466494290-0 .edge-thickness-thick{stroke-width:3.5px;}#publish-mermaid-1785466494290-0 .edge-pattern-solid{stroke-dasharray:0;}#publish-mermaid-1785466494290-0 .edge-thickness-invisible{stroke-width:0;fill:none;}#publish-mermaid-1785466494290-0 .edge-pattern-dashed{stroke-dasharray:3;}#publish-mermaid-1785466494290-0 .edge-pattern-dotted{stroke-dasharray:2;}#publish-mermaid-1785466494290-0 .marker{fill:#333333;stroke:#333333;}#publish-mermaid-1785466494290-0 .marker.cross{stroke:#333333;}#publish-mermaid-1785466494290-0 svg{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;}#publish-mermaid-1785466494290-0 p{margin:0;}#publish-mermaid-1785466494290-0 .label{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;color:#333;}#publish-mermaid-1785466494290-0 .cluster-label text{fill:#333;}#publish-mermaid-1785466494290-0 .cluster-label span{color:#333;}#publish-mermaid-1785466494290-0 .cluster-label span p{background-color:transparent;}#publish-mermaid-1785466494290-0 .label text,#publish-mermaid-1785466494290-0 span{fill:#333;color:#333;}#publish-mermaid-1785466494290-0 .node rect,#publish-mermaid-1785466494290-0 .node circle,#publish-mermaid-1785466494290-0 .node ellipse,#publish-mermaid-1785466494290-0 .node polygon,#publish-mermaid-1785466494290-0 .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#publish-mermaid-1785466494290-0 .rough-node .label text,#publish-mermaid-1785466494290-0 .node .label text,#publish-mermaid-1785466494290-0 .image-shape .label,#publish-mermaid-1785466494290-0 .icon-shape .label{text-anchor:middle;}#publish-mermaid-1785466494290-0 .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#publish-mermaid-1785466494290-0 .rough-node .label,#publish-mermaid-1785466494290-0 .node .label,#publish-mermaid-1785466494290-0 .image-shape .label,#publish-mermaid-1785466494290-0 .icon-shape .label{text-align:center;}#publish-mermaid-1785466494290-0 .node.clickable{cursor:pointer;}#publish-mermaid-1785466494290-0 .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#publish-mermaid-1785466494290-0 .arrowheadPath{fill:#333333;}#publish-mermaid-1785466494290-0 .edgePath .path{stroke:#333333;stroke-width:1px;}#publish-mermaid-1785466494290-0 .flowchart-link{stroke:#333333;fill:none;}#publish-mermaid-1785466494290-0 .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#publish-mermaid-1785466494290-0 .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#publish-mermaid-1785466494290-0 .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#publish-mermaid-1785466494290-0 .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#publish-mermaid-1785466494290-0 .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#publish-mermaid-1785466494290-0 .cluster text{fill:#333;}#publish-mermaid-1785466494290-0 .cluster span{color:#333;}#publish-mermaid-1785466494290-0 div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#publish-mermaid-1785466494290-0 .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#publish-mermaid-1785466494290-0 rect.text{fill:none;stroke-width:0;}#publish-mermaid-1785466494290-0 .icon-shape,#publish-mermaid-1785466494290-0 .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#publish-mermaid-1785466494290-0 .icon-shape p,#publish-mermaid-1785466494290-0 .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#publish-mermaid-1785466494290-0 .icon-shape .label rect,#publish-mermaid-1785466494290-0 .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#publish-mermaid-1785466494290-0 .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#publish-mermaid-1785466494290-0 .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#publish-mermaid-1785466494290-0 .node .neo-node{stroke:#9370DB;}#publish-mermaid-1785466494290-0 [data-look=\”neo\”].node rect,#publish-mermaid-1785466494290-0 [data-look=\”neo\”].cluster rect,#publish-mermaid-1785466494290-0 [data-look=\”neo\”].node polygon{stroke:#9370DB;filter:drop-shadow(1px 2px 2px rgba(185, 185, 185, 1));}#publish-mermaid-1785466494290-0 [data-look=\”neo\”].swimlane.cluster rect{filter:none;}#publish-mermaid-1785466494290-0 [data-look=\”neo\”].node path{stroke:#9370DB;stroke-width:1px;}#publish-mermaid-1785466494290-0 [data-look=\”neo\”].node .outer-path{filter:drop-shadow(1px 2px 2px rgba(185, 185, 185, 1));}#publish-mermaid-1785466494290-0 [data-look=\”neo\”].node .neo-line path{stroke:#9370DB;filter:none;}#publish-mermaid-1785466494290-0 [data-look=\”neo\”].node circle{stroke:#9370DB;filter:drop-shadow(1px 2px 2px rgba(185, 185, 185, 1));}#publish-mermaid-1785466494290-0 [data-look=\”neo\”].node circle .state-start{fill:#000000;}#publish-mermaid-1785466494290-0 [data-look=\”neo\”].icon-shape .icon{fill:#9370DB;filter:drop-shadow(1px 2px 2px rgba(185, 185, 185, 1));}#publish-mermaid-1785466494290-0 [data-look=\”neo\”].icon-shape .icon-neo path{stroke:#9370DB;filter:drop-shadow(1px 2px 2px rgba(185, 185, 185, 1));}#publish-mermaid-1785466494290-0 :root{–mermaid-font-family:\”trebuchet ms\”,verdana,arial,sans-serif;}否是Vue 2 (defineProperty)Vue 3 (Proxy)
开始：给对象添加属性
属性是新增的吗?
无需处理，属性已存在
Vue 响应式对象类型?
直接赋值不生效
通常生效，但也建议使用方案
选择修复方案
方案一: Vue.set / this.$set
方案二: 展开运算符 …obj, newProp
方案三: Object.assign / reactive包装
成功更新界面
结束
通过以上方法，你可以确保在 Vue 中无论何时添加对象属性，界面都能得到正确的响应。
