Shulou(Shulou.com)06/02 Report--

Today, I would like to talk to you about vue2 and vue3 data response principle analysis and how to achieve, many people may not understand, in order to make you better understand, the editor summed up the following, I hope you can get something according to this article.

Data response type

The view and data are updated automatically, and the view is updated automatically when the data is updated.

Track changes in data, and be able to do some hijacking operations when reading or setting data

Vue2 uses defineProperty

Switch to Proxy for vue3

How to track changes using defineProperty var obj = {} var age Object.defineProperty (obj, 'age', {get: function () {consoel.log (' get age...') Return age}, set: function (val) {console.log ('set age...') Age = val}}) obj.age = 100 / / set age... console.log (obj.age) / / get age.

The object obj calls the get method of data hijacking when fetching the age property.

The set method is called when assigning a value to the age property

So how to use Object.defineProperty to implement a data response?

Function defineReactive (data) {if (! data | | Object.prototype.toString.call (data)! ='[object Object]') return; for (let key in data) {let val = data [key]; Object.defineProperty (data, key, {enumerable: true, / / enumerable configurable: true, / / configurable get: function () {track (data, key); return val }, set: function () {trigger (val, key);},}); if (typeof val = "object") {defineReactive (val);}} function trigger (val, key) {console.log ("sue set", val, key);} function track (val, key) {console.log ("sue set", val, key) } const data = {name:'better', firends: ['1mechnology 2']} defineReactive (data) console.log (data.name) console.log (data.firends [1]) console.log (data.firends [0]) console.log (Object.prototype.toString.call (data))

This function defineReactve is used to encapsulate Object.defineProperty. As can be seen from the function name, the function is to define a responsive data. After encapsulation, you only need to pass data,key and val.

Whenever the track function is triggered when the key is read from data, and the data is set in the key of data, the trigger function in the set function triggers

The response of an array

Changing the contents of the array through the method on the Array prototype does not trigger getter and setter

It is found that there are seven methods in the Array prototype that can change the contents of the array itself, namely push pop shift unshift splice sort reverse

Vue2 rewrote these seven methods.

Implementation method:

Create an arrayMethods object based on Array.propertype, and then use Object.setPropertypeOf (o, arryMethods) to point the _ _ proto__ of o to arrayMethods

How to collect dependencies

Use

{{name}}

Data name is used in this template. We need to observe the data and notify which uses when the attributes of the data change.

This is why we need to collect dependencies first, that is, collect the places where the data name is used, and then trigger the previously collected dependency loop when the data changes. To sum up, we collect dependencies in getter and trigger dependencies in setter.

Use proxy

The Proxy object is used to create a proxy for an object to intercept and define basic operations (such as property lookup, assignment, enumeration, function loss, etc.).

Const p = new Proxy (target, handler)

Target

The target object to be wrapped with Proxy (which can be any type of object, including native arrays, functions, or even another proxy).

Handler

An object that usually takes functions as attributes, and the functions in each attribute define the behavior of proxy p when performing various operations.

Reflect is a built-in object that provides methods to intercept javascript operations, the same as Proxy handlers

Reflect.set assigns the value to the function of the property. Return a Boolean. Return true if the update is successful.

Reflect.get gets the value of a property on the object, similar to target [name]

How to realize hijacking

Const dinner = {meal:'111'} const handler = {get (target, prop) {console.log ('get...', prop) return Reflect.get (... arguments)}, set (target, key,value) {console.log (' get...', prop) console.log ('set',key,value) return Reflect.set (. Arguments)} const proxy = new Proxy (dinner) Handler) console.log (proxy.meal) console.log (proxy.meal)

The dinner object in the code is proxied to the handler

Different from defineProperty

The properties of defineProperty need to be traversed to supervise all properties

Use proxy to proxy all properties of an object

Using proxy to realize a simulated response

Function reactive (obj) {const handler = {get (target, prop, receiver) {track (target, prop); const value = Reflect.get (.. return value); if (typeof value = 'Object') {reactive (value)} else {return value}}, set (target,key, value, receiver) {trigger (target,key, value); return Reflect.set (... arguments) },}; return new Proxy (obj,handler)} function track (data, key) {console.log ("sue set", data, key);} function trigger (data, key,value) {console.log ("sue set", key,':',value);} const dinner = {name:'haochi1'} const proxy = reactive (dinner) proxy.nameproxy.list = [] proxy.list.push (1)

Automatic printing after execution

Think about it: why only use recursion in get, but not set?

Assignment also requires get first.

A brief summary:

Vue2 (shallow response)

Traverses data, using defineProperty to intercept all attributes

When the user manipulates the view, the set interceptor is triggered

Set first changes the current data, then notifies wartch, and watch notifies the view update.

Redraw the view and get the corresponding data from get again

Vue3 (deeply responsive):

Use proxy as a proxy; intercept any operation of any attribute of data (13), including reading and writing of attributes, addition of attributes, deletion of attributes, etc.

Use Reflect for reflection; dynamically perform specific operations on the corresponding properties of the proxied object

The reflective objects (reflect) of proxy objects (proxy) must cooperate with each other to achieve responsiveness.

The difference between the two

Proxy can hijack the whole object, while Object.defineProperty can only hijack the properties of the object; the former can be responsive by recursively returning the value of the attribute, the latter needs to traverse each attribute deeply, and the latter is very unfriendly to the operation of the array.

After reading the above, do you have any further understanding of vue2 and vue3 data response analysis and how to implement it? If you want to know more knowledge or related content, please follow the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.