vuejs中怎么给vm实例动态添加响应式属性？

Question

vue.js官网中相关章节是这么解释的：链接为：https://cn.vuejs.org/v2/guide...有时你可能需要为已有对象赋予多个新属性，比如使用Object.assign()或_.extend()。在这种情况下，你应该用两个对象的属性创建一个新的对象。所以，如果你想添加新的响应式属性，不要像这样：Object.assign(vm.userProfile,{age:27,favoriteColor:'VueGreen'})你应该这样做：vm.userProfile=Object.assign({},vm.userProfile,{age:27,favoriteColor:'VueGreen'})我用代码测试了一下，确实如此，但不明白为什么会这样，很奇怪，来个大神给解释下吧。

Answer 1

两种写法的userProfile得到的结果虽然是一样的。还是官网那个页面，前面有提到---对于已经创建的实例，Vue不能动态添加根级别的响应式属性
varvm=newVue({
data:{
a:1
}
})
//`vm.a`现在是响应式的
vm.b=2
//`vm.b`不是响应式的
问题中的第一种写法相当于vm.b=2,对于已经创建的实例userProfile，对于在userProfile上添加属性，Vue不能动态的检测到。第二种写法相当于vm.a=XX,先把两个对象的属性赋给一个空的对象，然后再把这个对象赋给userprofile,这是直接为根级别的对象重新赋值，这与对对象属性的添加与删除本质是不一样的。这是我的想法。