1. Data responsiveness

One of the core ideas of Vue.js is data-driven. By data-driven, we mean that the view is generated by data, and we modify the view not by manipulating the DOM directly, but by modifying the data.

Below is the illustration from Vue’s official documentation. The yellow part is the render method of Vue. The Render method is called for re-rendering during view initialization and view update. Rendering inevitably touches every piece of data that needs to be displayed to the view (purple) and triggers the get method to collect all dependencies for the render. When we modify the collected data, we trigger the set property method in the data, which changes the value of the data and notifys the dependent observer, thus triggering the re-rendering of the view.

The data defined in data does not have set. How do get and set methods come into being? This is the core of Vue’s data responsiveness, overriding the get and set property methods of data.

Two, make the data responsive

Getter, setter

let obj = {
firstName: "dl".lastName: "xx".get name() {
return this.firstName + this.lastName;
},
set name(value) {this.firstName = value[0]
this.lastName = value.slice(1)},age: 18
};

obj.name = 'dlcc'
console.log( obj.name);
Copy the code
const Vue = window.Vue

const myData = {
  n:0
}

new Vue({
  data: myData,
  template: ` 
      

       {{n}}
      
 `
}).$mount('#app')

setTimeout(() = > {
  myData.n += 10
}, 0)

console.log(myData)
Copy the code

When you print on the console, the getter and setter methods for the name property and the value n in the data in the instantiated vue are printed as n:(…) , and there are getter and setter methods.

Note Vue overwrites data N to convert it to an object property of getter/setter.

2. Object-defineproperty () method

Vue is set to convert the common property N in data to the property N of getter and setter methods through the JS standard built-in Object method object.defineProperty.

When you pass an ordinary JavaScript object into a Vue instance as the data option, Vue iterates through all of the object’s properties, And use Object.defineProperty to turn all of these properties into getters/setters.

Syntax: Object.defineProperty(obj, prop, Descriptor)

Parameters:

Obj: Object on which attributes are to be defined.

Prop: The name of the property to define or modify.

Descriptor: Attribute descriptor to be defined or modified.

Return value: The object passed to the function.

Proxy () 3

let myData = {
    n: 0
}
let data = proxy({
    data: myData
}) // The parentheses are anonymous objects that cannot be accessed
function proxy({ data } /* Destruct assignment */ ) {
    // Omit the for loop
    let value = data.n
    Object.defineProperty(data, 'n', {
        get() {
            return value
        },
        set(newValue) {
            value = newValue
        }
    })
    
    const obj = {}
    Object.defineProperty(obj, 'n', {
        get() {
            return data.n
        },
        set(value) {
            data.n = value
        }
    })
    return obj // obj is the proxy
}
Copy the code

Let data = proxy(data); let data = proxy(data); let data = proxy(data); Data in, operation myData, will be intercepted by our getter/setter.

Conclusion: Vue iterates through all the attributes of the incoming data Object and converts them into getters/setters using Object.defineProperty, generating a new Object that takes full responsibility for the data — the instantiated Vue Object VM. The VM then acts as a proxy for Data, monitoring all of data’s attributes, and when the value changes, vue calls the Render function to rerender the view.

3. Vue’s data response

When you create an instance

const vm = new Vue({data: {n: 0}})
Copy the code
  • Vue makes the VM a proxy for myData.
  • Vue monitors all properties of myData.

1. Add attributes to data

For general objects, all possible attributes can be written out in advance in data, so that there is no need to add attributes, only need to change it. Attributes can also be added in other ways. With that in mind, let’s look at an API that Vue provides:

Vue. Set (object, key, value) orthis.$set(object, key, value)
Copy the code

2. Methods on arrays

Vue makes changes to the array by adding a layer of stereotypes, in which vue changes seven methods to override the seven methods of the previous array stereotype. When these new methods are called, Vue will listen for the new element (equivalent to the set operation) and proxy the new data, so that Vue can re-detect the changes in the array.

  • push()
  • pop()
  • shift()
  • unshift()
  • splice()
  • sort()
  • reverse()