Surprise! VUE data can't drive the view?

Vue cannot detect the addition or deletion of object properties

1. Emphasis: Vue cannot detect the addition or deletion of object attributes

Official website - deep response principle( https://cn.vuejs.org/v2/guide ...) It is introduced in: due to the limitations of modern JavaScript (and the abandonment of Object.observe), Vue cannot detect the addition or deletion of object attributes. Because Vue will perform getter/setter conversion on the attribute when initializing the instance, the attribute must exist on the data object for Vue to convert it, so that it can be responsive.

The above a is responsive, so the page will be rendered automatically after the change of a;
However, b is an attribute added after the vm instance is created, so it is not responsive. When we change the value of b, the data seen through DevTool will not change unless we refresh the data in DevTool and the page will not refresh.

There are three solutions:

var vm = new Vue{
    el: "#app",
    data:{
        obj:{
            name: "aaa"            
        }
    }
}

1. Scheme 1: use Vue set(object,key,value)

Vue.set(vm.obj,"sex","man")

2. Scheme 2: use this$ set(this.object,key,value)

this.$set(this.obj,"sex","man")

3. Scheme 3: use object assign({},this.obj)

this.obj.sex = "man";
this.obj = Object.assign({},this.obj)

//Or the following way
this.obj = Object.assign({},this.obj,{"sex","man"})

2. Emphasis: delete the attributes of vue instances

Note: Vue does not allow you to dynamically add new root level reactive properties on the created instance. However, it can use Vue The set (object, key, value) method adds the response attribute to the nested object.

For the above Demo example, use this$ The attributes added by set can be deleted in the following ways:

//This method can delete attributes and trigger data responsive updates
this.$delete(this.mainData.test, "boolean");
//And through delete this mainData. test. Boolean this method cannot update the view layer responsively.

Array problem

 changeArr() {
      // this.arr[0] = 112233;
      delete this.arr[0];
      console.log("This is the modified array", this.arr);
      // $set(arr, 0, 112233);
    },
    changeObj() {
      // this.haha.content = "I am a little monk";
      delete this.haha.age;
      console.log("This is the modified object", this.haha);
    }

Deleting arrays or objects cannot be monitored by VUE. Then move out a method.

Use the set in vue to render the array or object of modified content to the page.

For arrays:
this.$set(this.arr, 0, 112233);

For objects:
this.$set(this.haha, "content", "I'm a little monk");

Explanation of the method set.
this.$ Set (array or object, modified subscript or object property name, modified value)

Extension:
When the value in the array is an object,
When there is another object in the object,
Do you still need set to add or delete~~~

code

 data() {
    return {
      arr: [{ key: "name" }, { 12: "hhah" }, 2, 3, 4, 5, 6],
      haha: {
        name: {
          name: "lili"
             }
           }
    };
  },
  methods: {
    changeArr() {
      this.arr[0].key = 112233;
      console.log("This is the modified array", this.arr);
    },
    changeObj() {
      this.haha.name.name = "I am a little monk";  
      console.log("This is the modified object", this.haha); 
    }
  }

Notice. I didn't use $set~

In this way, you don't need to use set to modify the objects in the array and the objects in the object!

Tags: Vue

Posted by dannyone on Tue, 17 May 2022 17:49:59 +0300