Vue 中给 data 中的对象属性添加一个新的属性时会发生什么？如何解决？

本文主要是介绍Vue 中给 data 中的对象属性添加一个新的属性时会发生什么？如何解决？，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

<template> <div><ul><li v-for="value in obj" :key="value"> {{value}} </li> </ul> <button @click="addObjB">添加 obj.b</button> </div>
</template><script>export default { data () { return { obj: { a: 'obj.a' } } },methods: { addObjB () { this.obj.b = 'obj.b' console.log(this.obj) } }}
</script>

点击 button 会发现，obj.b 已经成功添加，但是视图并未刷新。这是因为在Vue实例创建时，obj.b并未声明，因此就没有被Vue转换为响应式的属性，自然就不会触发视图的更新，这时就需要使用Vue的全局 api $set()：

addObjB () (this.$set(this.obj, 'b', 'obj.b')console.log(this.obj)
}

$set()方法相当于手动的去把obj.b处理成一个响应式的属性，此时视图也会跟着改变了。

这篇关于Vue 中给 data 中的对象属性添加一个新的属性时会发生什么？如何解决？的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---