The relevant chapters in vue.js website explain this way:
The link is:https://cn.vuejs.org/v2/guide …
Sometimes you may need to assign more than one new attribute to an existing object, such as using Object.assign () or
_.extend()。 In this case, you should create a new object with the attributes of the two objects. So, if you want to add new responsive attributes, don’t look like this:Object.assign(vm.userProfile, { age: 27, favoriteColor: 'Vue Green' })
You should do this:
vm.userProfile = Object.assign({}, vm.userProfile, { age: 27, favoriteColor: 'Vue Green' })
I tested it with code. It is true, but I don’t understand why it is so. It is very strange. Let’s have a great god explain it.
Two types of writing
userProfile
Although the results are the same.
It is also the website page mentioned earlier-Vue cannot dynamically add root-level response attributes to already created instancesvar vm = new Vue({ data: { a: 1 bracket }) //`vm.a`is now responsive vm.b = 2 //`vm.b`is not reactive
The first way of writing in the question is equivalent to
vm.b = 2
For instances that have already been createduserProfile
, for inuserProfile
Add attributes to the,Vue
It cannot be detected dynamically.
The second way of writing is equivalent tovm.a = XX
, first assign the attributes of two objects to an empty object, and then assign this object touserprofile
This is a direct re-assignment of the root-level object, which is different from the nature of adding and deleting object attributes. This is my idea.