Vue中对象直接赋值有哪些潜在问题及如何规避？

本文共计457个文字，预计阅读时间需要2分钟。

目录 + Vue对象直接赋值的坑 + 使用Object.assign({},{}) Vue对象的直接赋值陷阱 + 受JavaScript限制，Vue不能监听到对象属性的添加或删除。如果这样做了，你会发现添加或删除的属性并未被Vue观察到。

目录

• Vue对象直接赋值的坑
• Vue对象的赋值Object.assign({}, row)

Vue对象直接赋值的坑

受JavaScript的限制，Vue不能监听到对象属性的添加或删除。如果这样做了，你会发现添加或删除的属性不是响应式的，即无法及时更新视图。

如果我们需要将a对象赋值给b对象时，要么把b对象的所有属性都在a对象中定义一下，要么 使用this.$set(this.object,key,value)将b对象中有a对象中没有的属性set进去，或者使用Object.assign(this.a,this.b) 将所有可枚举属性的值从b对象复制到a对象并返回a对象。（如果有同名属性的话，b属性的值会覆盖a属性的值）

注意：目前IE浏览器不兼容Object.assign()，如果需要兼容IE的话最好不要直接使用这个方法。