Vue2.0 adds attributes to data objects and triggers view updates

Add the age property to the student object

data () {
  return {
    student: {
      name: '',
      sex: ''
    }
  }
}
Copy the code

As we all know, assigning to student directly, while adding attributes, does not trigger a view update

mounted () {
  this.student.age = 24
}
Copy the code

The reason: restricted by ES5, vue.js cannot detect the addition or deletion of object attributes. Because vue.js converts a property to a getter/setter when initializing an instance, the property must be on the data object for vue.js to transform it in order for it to be responsive.

To handle this, we can use the $set() method to both add attributes and trigger view updates.

However, it is worth noting that there are some problems with the use of $set(), which leads to some detachments when you are new to this method!

$set(key,value) this.$set(key,value)

mounted () {
  this.$set(this.student.age, 24)
}
Copy the code

$set(this.data, “key”,value’) $set(this.data, “key”,value’)

Supplementary knowledge: Vue $set() and Vue.set() principle and use

1. Introduction

Problem: When developing with vUE, you may encounter situations where assigning values to data after generating vUE instances does not automatically update the view. That is, if new properties are added to the instance after it is created, it does not trigger view updates.

Cause: Due to ES5 limitations, vue.js cannot detect the addition or deletion of object attributes. Because vue.js converts a property to a getter/setter when initializing an instance, the property must be on the data object for vue.js to transform it in order for it to be responsive.

Therefore: Vue cannot detect the following array changes:

When you set an item directly using an index, for example, vm.items[indexOfItem] = newValue

When you modify the length of an array, for example, vm.items. Length = newLength

For example: use this.arr[0] to update the contents of the array, and the view is not refreshed

Set (this.arr, 0,! This.arr [0]) updates the contents of the array, and the view is refreshed

Use this.arr[0] =! This.arr [0] and this.obj. A =! This.obj.a is updated at the same time, and the view is refreshed

Conclusion:

Vue. Set () is used if the method simply updates an Array.

If the method contains both an array and an object update, you can simply operate on data.

Principle 2.

Each component instance has a corresponding Watcher instance object, which records properties as dependencies during component rendering and then, when setters for dependencies are called, informs Watcher to recalculate, causing its associated components to be updated.

Restricted by modern JavaScript (and deprecated by Object.Observe), Vue cannot detect additions or deletions of Object properties. Since Vue performs getter/setter conversion procedures on the property when it initializes the instance, the property must exist on the Data object for Vue to convert it so that it is responsive.

$set() and vue.set ()

3.1 Overwrite with vue.set ()

Grammar:

Vue.set( target, propertyName/index, value )

Parameters:

{Object | Array} target

{string | number} propertyName/index

{any} value

Return value: the value set.

Usage:

Add a property to the reactive object and make sure the new property is also reactive and triggers view updates.

It must be used for adding a new property to reactive object, because the Vue cannot detect common new property (such as this. MyObject. NewProperty = ‘hi’)

Note:

The object cannot be a Vue instance, or the root data object of the Vue instance.

<template> <div class="home"> <div v-for="(item,index) in items" :key="index">{{item}}</div> <button </button> </div> </template> <script> import Vue from 'Vue' 'Home', data(){ return{ items:[1, 2, 3] } }, methods:{ btn(){ Vue.set(this.items, 1, 'two') console.log(this.items); } } } </script>Copy the code

3.2 Overwrite with $set()

Grammar:

vm.$set( target, propertyName/index, value )

Parameters:

{Object | Array} target

{string | number} propertyName/index

{any} value

Return value: the value set.

Usage:

This is the alias for global vue.set.

Reference: the Vue. Set

<template> <div class="home"> <div v-for="(item,index) in items" :key="index">{{item}}</div> <button </button> </div> </template> <script> export default {name: 'Home', data(){ return{ items:[1, 2, 3] } }, methods:{ btn(){ this.$set(this.items, 1, 'two') console.log(this.items); } } } </script>Copy the code

Vue. Set () and this.$set(

Vue. Set () the source code:

import { set } from '.. /observer/index' Vue.set = setCopy the code

This $set () the source code

import { set } from '.. /observer/index' Vue.prototype.$set = setCopy the code

Vue. Set () and this.$set() use the same set function.

The set function is derived from… /observer/index file exported.

The difference is that Vue. Set () binds the set function to the Vue constructor, whereas this.$set() binds the set function to the Vue prototype.