What are the methods to add new properties of objects to the detection sequence in Vue?

Below I will share with you a method of adding new attributes of objects to the detection sequence in Vue. It has a good reference value and I hope it will be helpful to everyone.

In vue, add new attributes in the object to the detection sequence

deepCopy(o1, o2) { // 将o2的内容拷贝给data中的o1
   var key, i
   if (o2 instanceof Array) {
    for (i = 0; i < o2.length; i++) {
     if (o2[i] instanceof Array) {
      this.$set(o1, i, [])
      this.deepCopy(o1[i], o2[i])
     }
     else if (o2[i] instanceof Object) {
      this.$set(o1, i, {})
      this.deepCopy(o1[i], o2[i])
     }
     else {
      this.$set(o1, i, o2[i])
     }
    }
   }
   else if (o2 instanceof Object) {
    for (key in o2) {
     if (o2[key] instanceof Array) {
      this.$set(o1, key, [])
      this.deepCopy(o1[key], o2[key])
     }
     else if (o2[key] instanceof Object) {
      this.$set(o1, key, {})
      this.deepCopy(o1[key], o2[key])
     }
     else {
      this.$set(o1, key, o2[key])
     }
    }
   }
   else {
    o1 = o2
   }
}

Because Vue does not allow dynamic addition of root-level responsive attributes , so you must declare the root-level reactive attribute before initializing the instance, even if it is just a null value

If an attribute is not declared in advance and is added later, it cannot detect the change. For some fixed structures, it is Changes can be detected. For example, I know that an obj must have key1 and key2 attributes, and I can initialize them in advance. If these things are dynamic, I can't say that in advance. If you add it later, vue will not be able to detect the change.

At this time, just pass the variable you have declared in data and the value you want to assign to the variable as parameters into the function.

The above is what I have compiled for everyone. I hope that in the future It will be helpful to everyone.

Related articles:

How to solve the problem that Vue cannot detect changes in arrays or objects?

How to implement watch monitoring objects and corresponding value changes in vue

watch monitoring routing changes and watch monitoring Objects (detailed tutorial)

The above is the detailed content of What are the methods to add new properties of objects to the detection sequence in Vue?. For more information, please follow other related articles on the PHP Chinese website!