Detailed explanation of the use of this.$set in Vue

Use of this.$set in Vue

Background : When I was writing a front-end project, the back-end gave us a json object, and I rendered it on the page. However, due to my own needs, I want to add a field to the returned object, so I push a field into it. The field is added, but the page rendering does not change. Later I realized it was not responsive. If we want this new field to be responsive, we need to use this.$set to inject data.

When an object or array (the value in the array is an object) is declared or assigned in Vue's data, adding a new property to the object and updating the value of this property will not update the view.

use

this.$set( target, key, value）

target : represents the data source, which is the array or object you want to operate on

key : the field to be operated

value : the data to be changed

Here is a small example:

Add an age property to an object and make it change responsively

<template>
  <div class="text">
      <p>{{list}}</p>
      <button @click="add">age++</button>
  </div>
</template>
<script>
export default {
    data(){
        return {
            list:{ name: "Zhang San"}
        }
    },
    methods: {
        add(){
            if(!this.list.age){ // If there is no age attribute, add an age attribute to it this.list.age=18
            }else{
                this.list.age++
            }
            console.log(this.list)
        }
    }
}
</script>

When we do not use this.$set to add object properties, the effect is:

The data is indeed added, but the page does not render the age property responsively.

When we use this.$set(this.list,'age',18) to add an attribute. Effect:

We can see that the added data is responsive.

Why responsive?

If you look closely, you can see that this.$set has additional get age and set age methods, which is why it is responsive.

analyze

The responsive principle of Vue is that a JavaScript object is passed into a Vue instance as a data option. Vue will traverse all the properties of this object and use Object.defineProperty to convert all these properties into getters/setters. These getters/setters are invisible to the user, but internally they allow Vue to track dependencies and notify changes when properties are accessed and modified. It should be noted here that different browsers format getter/setter differently when printing data objects in the console. The following figure is from the official documentation.

Summarize

This article ends here. I hope it can be helpful to you. I also hope you can pay more attention to more content on 123WORDPRESS.COM!