$set method in Vue

Project scenario:

For example: when I was writing a front-end project, the backend gave us a json object, and I had already rendered it on the page. But due to my own needs, I wanted to add a field to the returned object, only to realize that it was not responsive. If we want this new field to be responsive, we need to use this.$set to inject data.

When Vue's data declares or has already assigned an object or array (the value in the array is an object), add a new property to the object. If the value of this property is updated, the view will not be updated.

Problem Description:

Not much to say, let's go to the demo:

<!--先看一个例子-->

<template>
  <div class="hello">
   <div>{
    
    {list}}</div>
    <button @click="add">age++</button>
  </div>
 
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      list: {name:'LL'}
    }
  },
  methods:{
    add(){
      if(!this.list.age){
        this.list.age=18
      }else
      {
        this.list.age++
      }
       console.log(this.list)
    }
  }
}
</script>
<style scoped>

</style>

When we don't use this.$set to add object properties, the rendering is as follows:

The new attribute age has indeed been added, but the page list has not been re-rendered to the view layer, and the page does not have a responsive rendering age attribute

When we use this.$set to add object properties:

    add() {
      if(!this.list.age){
        this.$set(this.list,'age',19)
      }else{
        this.list.age++
      }
       console.log(this.list)
    },

We can find that the data added at this time becomes responsive data.

---

Cause Analysis:

Since Vue will perform two-way data binding when initializing the instance, and use Object.defineProperty() to add getter/setter methods to property traversal, the above process must be performed when the property exists on the data object, so that it can be responsive. If you want to add a new attribute to the object, the new attribute has not undergone the above process at this time, and it is not responsive, so it will appear that the data changes and the page remains unchanged. At this time, you need to use $set.

Add a property to the reactive object and make sure the new property is also reactive and triggers a view update. It must be used to add new properties to reactive objects, because Vue cannot detect ordinary new properties
(such as this.myObject.newProperty = 'hi')

Vue cannot detect the addition or removal of properties. Since Vue performs getter/setter conversion on properties when initializing an instance, the property must exist on the data object for Vue to convert it to reactive. For example:

var vm = new Vue({
  data:{
    a:1
  }
})

// `vm.a` 是响应式的

vm.b = 2
// `vm.b` 是非响应式的

solution:

use:

Vue.set( target, propertyName/index, value )
参数：

{Object | Array} target
{string | number} propertyName/index
{any} value
返回值：设置的值

Array: this.$set(Array, index, newValue)
Note: The array used here is to modify and replace the value through the index.

Object: this.$set(Object, 'Key', Value)
Note: Here the object is modified and manipulated by the key name, so the sting format is required.

Replenish:

Sometimes you may need to assign multiple new properties to existing objects, such as using Object.assign() or _.extend(). However, new properties thus added to the object do not trigger updates. In this case, you should create a new object with the original object and the properties of the object to be mixed in.

// 代替 `Object.assign(this.someObject, { a: 1, b: 2 })`
this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })