vue.js官网中相关章节是这么解释的:
链接为:https://cn.vuejs.org/v2/guide...
有时你可能需要为已有对象赋予多个新属性,比如使用 Object.assign() 或
_.extend()。在这种情况下,你应该用两个对象的属性创建一个新的对象。所以,如果你想添加新的响应式属性,不要像这样:Object.assign(vm.userProfile, { age: 27, favoriteColor: 'Vue Green' })
你应该这样做:
vm.userProfile = Object.assign({}, vm.userProfile, { age: 27, favoriteColor: 'Vue Green' })
我用代码测试了一下,确实如此,但不明白为什么会这样,很奇怪,来个大神给解释下吧。
两种写法的
userProfile
得到的结果虽然是一样的。还是官网那个页面,前面有提到--- 对于已经创建的实例,Vue 不能动态添加根级别的响应式属性
问题中的第一种写法相当于
vm.b = 2
,对于已经创建的实例userProfile
,对于在userProfile
上添加属性,Vue
不能动态的检测到。第二种写法相当于
vm.a = XX
,先把两个对象的属性赋给一个空的对象,然后再把这个对象赋给userprofile
, 这是直接为根级别的对象重新赋值,这与对对象属性的添加与删除本质是不一样的。这是我的想法。