Article source part of the source

I. A graph to track the data in response to changes

Data responsiveness is one of the most unique features of Vue, its non-invasive responsive system. Data models are just plain old JavaScript objects. And when you modify them, the view is updated.

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. Object.defineproperty is a non-shim feature in ES5, which is why Vue does not support IE8 and earlier browsers.

These getters/setters are invisible to the user, but internally they allow Vue to track dependencies and notify changes when the property is accessed and modified. It is important to note that different browsers format getters/setters differently when printing data objects on the console, so it is recommended to install vue-devTools for a more user-friendly interface for examining data.

Each component instance corresponds to a Watcher instance, which records “touched” data properties as dependencies during component rendering. Watcher is then notified when the setter for the dependency fires, causing its associated component to be re-rendered.

Due to JavaScript limitations, Vue cannot detect array and object changes. However, there are ways to circumvent these limitations and make them responsive

Ii. What is the meaning of vUE data responsiveness?

Vue allows you to listen for data declared in an instance. When the data changes, the page is rerendered based on the changed content, simplifying the programmer’s life.

Three. How to achieve data responsiveness?

Object.defineproperty (), with getter and setter implementation of listening, and the introduction of a proxy, responsible for reading and writing object properties, code as follows:Copy the code
// Requirement 5: Let myData5 = {n:0} let data5 = proxy2({data:myData5}) Function proxy2({data}{let value = data.n object.defineProperty (data, 'n', {get(){return value}, Set (newValue){if(newValue<0)return value = newValue}}) // Obj console.log(' need 5: ${data5.n} ') mydata5.n = -1 console.log(' Requirement 5: ${data5.n} ', set to -1 failed ') mydata5.n = 1 console.log(' Requirement 5: ${data5.n} ') mydata5.n = 1 console.log(' Requirement 5: ${data5.n} ') ${data5.n}, set to 1 succeeded ')Copy the code

Vm = new Vue({data:myData}), will make vm become the proxy of myData, the wake up of myData to prevent myData changes. Only if the proxy VM is aware of the change can the view be rerendered based on the change.

How to add key to data

1. Common objects

Use vue. set or this. set(add set(add set to prevent naming conflicts)

Methods: {setB () {Vue. Set (enclosing obj, 'b', 1) / / equivalent to the enclosing $set (enclosing obj, 'b', 1)}}Copy the code

Result: Add key, automatically create proxy and listener, trigger UI update

2. Array objects

Code:

class VueArray extends Array{ push(... args){ const oldLength = this.length super.push(... Args) console.log(' you pushed ') for(let I = oldLength; i<this.length; I ++){vue. set(this, I,this[I])}}} //Copy the code

The idea is to add a layer of prototypes for vUE to use.

V. Advantages and disadvantages of vUE data responsiveness:

1. Advantages:

It allows users to create UI without manipulating the DOMCopy the code

2. Disadvantages:

1) Disadvantages: The API used by VUe2 is flawed, so vUE cannot be responsive to new attributes and cannot continue to listen. 2) How to solve this problem? Vue3 uses proxy to solve the problem that Object.defineProperty cannot add attributesCopy the code

Specific so much, after understanding in-depth and then update.