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

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

我们从一个例子开始：

<template><div><p v-for="(value, key) in items" :key="key">{{ value }}</p><button @click="handleclick">按钮</button></div>
</template><script>
export default {name: 'HelloWorld',data() {return {items: {oldProperty: '旧属性'}}},methods: {handleclick() {this.items.newProperty = '新属性'console.log(this.items)  // 输出带有 newProperty 的 items}},}
</script>

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

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

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

<template><div><p v-for="(value, key) in items" :key="key">{{ value }}</p><button @click="handleclick">按钮</button></div>
</template><script>
export default {data() {return {items: {oldProperty: '旧属性'}}},methods: {handleclick() {this.$set(this.items, 'newProperty', '新属性')}}
}
</script>

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

<template><div><p v-for="(value, key) in items" :key="key">{{ value }}</p><button @click="handleclick">按钮</button></div>
</template><script>
export default {data() {return {items: {oldProperty: '旧属性'}}},methods: {handleclick() {const properties = {'newProperty1': '新属性1','newProperty2': '新属性2','newProperty3': '新属性3'}this.items = {...this.items,...properties}}}
}
</script>

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

<template><div><p v-for="(value, key) in items" :key="key">{{ value }}</p><button @click="handleclick">按钮</button></div>
</template><script>
export default {data() {return {items: {oldProperty: '旧属性'}}},methods: {handleclick() {const properties = {'newProperty1': '新属性1','newProperty2': '新属性2','newProperty3': '新属性3'}this.items = Object.assign({}, this.items, properties)}}
}
</script>

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

<template><div><p v-for="(value, key) in items" :key="key">{{ value }}</p><button @click="handleclick">按钮</button></div>
</template><script>
export default {name: 'HelloWorld',data() {return {items: {oldProperty: '旧属性'}}},methods: {handleclick() {this.items.newProperty = '新属性'this.$forceUpdate()}},}
</script>

小结

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

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

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

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