本文主要是介绍组件中的data为什么要定义成一个函数, 返回值是一个对象？动态给vue的data添加一个新的属性时会发生什么？怎样解决？，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
组件中的data为什么要定义成一个函数，返回值是一个对象：
对象为引用类型，当复用组件时，由于数据对象都指向同一个data对象，当在一个组件中修改data时其他重用的组件中的data会同时被修改，而使用返回对象的函数，由于每次返回的都是一个新对象（Object的实例），引用地址不同，则不会出现这个问题。
动态给vue的data添加一个新的属性时会发生什么：
数据虽然更新了，但是页面没有更新，原因是Vue2是通过object.defineproperty实现数据响应式的当我们访问定义的属性或者修改属性值的时候都能够触发setter 与 getter,但是我们为 obj 添加新属性的时候却无法触发事件属性的拦截，原因是一开始 obj 的定义属性被设成了响应式数据，而新增的属性并没有通过 obj.defineproperty 设置成响应式数据。
解决方案：
1.vue.set（）：通过vue.set 向响应式对象中添加一个 property ,并确保这个新 property 同样是响应式的，且触发视图更新
2.Obj.assign（） ：直接使用 obj.assign（）添加到对象的新属性不会触发更新，应该要创建一个新的对象，合并原对象和混入对象的属性
3.$forceUpdate ：可以对Vue进行一次强制更新，$forceUpdate 可以使vue实例重新渲染（仅仅影响实例本身和插入插槽内容的子组件而不是所有子组件）
总结：
1.如果为对象添加少量的新属性，可以直接采用vue.set（）
2.如果需要为新对象添加大量的新属性，则通过 obj.assign（）创建新对象
3.如果实在不知道该怎么操作的时候可以使用 $forceUpdate（） 进行强制刷新（不建议）
这篇关于组件中的data为什么要定义成一个函数, 返回值是一个对象？动态给vue的data添加一个新的属性时会发生什么？怎样解决？的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
