Vue2中给对象添加新属性界面不刷新？

在 Vue.js 中，如果你在对象上添加新属性而界面没有刷新，这可能是由于Vue的响应性系统的特性所导致的。Vue在初始化时会对数据进行响应式转换，这意味着只有在初始时存在的属性才会被监听，后来添加的属性不会自动触发视图更新。

我们从一个例子开始：

点击按钮，发现结果不及预期，数据虽然更新了（log打印出了新属性），但页面并没有更新。

有几种方法可以解决这个问题：

• 方法1：使用全局的Vue.set()

• 方法2：使用展开运算符，给对象重新赋值

• 方法3：使用Object.assign()，给对象重新赋值

• 方法4：采取$forceUpdate()进行强制刷新 (不建议)

小结

如果为对象添加少量的新属性，可以直接采用 Vue.set()

如果需要为新对象添加大量的新属性，则通过 展开运算符 或 Object.assign() 创建新对象

如果你实在不知道怎么操作时，可采取 $forceUpdate() 进行强制刷新 (不建议)

Tips：Vue3是用过proxy实现数据响应式的，直接动态添加新属性仍可以实现数据响应式。