This is the 20th day of my participation in the Genwen Challenge

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.

Case study:

<template>
  <div class="home">
    <div>{{student}}</div>
    <div v-for="(item,index) in items" :key="index">{{item}}</div>
	  <button @click="btn()">Modify the</button>
  </div>
</template>

<script>
export default {
  name: 'Home'.data(){
    return{
      student: {name:'Joe',},items: [1.2.3],}},methods: {btn(){
      this.student.age = 18;
      this.items[1] = 'two';
	  console.log(this.student,this.items); }}}</script>
Copy the code

When the button is clicked, the page:

When clicking the button after console:

The reason:

Restricted by ES5, vue.js cannot detect additions or deletions 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

Eg:

Use this.arr[0] to update the contents of the array. 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) parameter: {Object | ArrayPropertyName} target {string | number} / index {any} the value return value: set of values. Usage: Add a property to a reactive object and make sure the new property is also reactive and triggers view updates. It must be used to add new properties to reactive objects because Vue cannot detect normal new properties (e.gthis.myObject.newProperty = 'hi') Note: The object cannot be a Vue instance, or the root data object of the Vue instance.Copy the code
<template>
  <div class="home">
    <div>{{student}}</div>
    <div v-for="(item,index) in items" :key="index">{{item}}</div>
	<button @click="btn()">Modify the</button>
  </div>
</template>

<script>
import Vue from 'vue' // Don't forget to import
export default {
  name: 'Home'.data(){
    return{
      student: {name:'Joe',},items: [1.2.3],}},methods: {btn(){
      Vue.set(this.student, 'age'.18);
      Vue.set(this.items, 1.'two');
	  console.log(this.student,this.items); }}}</script>
Copy the code

When the button is clicked, the page:

When clicking the button after console:

3.2 Overwrite with $set()

Grammar:

$set(target, propertyName/index, value) {Object | ArrayPropertyName} target {string | number} / index {any} the value return value: set of values. Usage: This is the alias of global vue.set. Reference: the Vue. SetCopy the code
<template>
  <div class="home">
    <div>{{student}}</div>
    <div v-for="(item,index) in items" :key="index">{{item}}</div>
	<button @click="btn()">Modify the</button>
  </div>
</template>

<script>
export default {
  name: 'Home'.data(){
    return{
      student: {name:'Joe',},items: [1.2.3],}},methods: {btn(){
      this.$set(this.student, 'age'.18);
      this.$set(this.items, 1.'two');
	  console.log(this.student,this.items); }}}</script>
Copy the code

When the button is clicked, the page:

When clicking the button after console:

Vue. Set () and this.$set(

Vue. Set () the source code:

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

This $set () the source code

import { set } from '.. /observer/index'. Vue.prototype.$set = set ...Copy the code
Vue can be found.setThe () and this.$set() apis use the same set function. The set function is derived from... /observer/index file exported. Difference: the Vue.set() binds the set function to the Vue constructor, and this.$set() binds the set function to the Vue prototype.Copy the code