How to dynamically add reactive attributes to vm instances in vuejs?

  javascript, vue.js

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 writinguserProfileAlthough the results are the same.
It is also the website page mentioned earlier-Vue cannot dynamically add root-level response attributes to already created instances

var 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 tovm.b = 2For instances that have already been createduserProfile, for inuserProfileAdd attributes to the,VueIt 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 touserprofileThis 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.

Related Posts: