2021-08-11

Vue2 The principle of data response

1、 What is? defineProperty?

defineProperty Is to set object properties , Use the... In the attribute set and get It realizes responsive two-way binding ;

grammar ：Object.defineProperty( The object to set , The properties of the object to be modified , Property description )

Property description ：
1、configurable - Indicates whether this property can be delete, Default false;
2、enumerable - Indicates whether this property can be enumerated , The default is false;
3、value - Set the value corresponding to this property , The default is undefined;
4、writable - Set up value Whether the property can be modified , by true Can be changed only when , The default is false;
5、get - Provide properties with getter Method , The default is undefined, When accessing this property , The method will be executed , The default parameter is this object ;
6、set - Provide properties with setter Method , The default is undefined, When the attribute value is modified , Will execute the method , The only parameter is the new value ;

Method to get the properties owned by the object ：Object.getOwnPropertyDescriptor( object , An attribute of an object )

var obj = {
a: 1,
b: 2
}
var value = obj.b;
Object.defineProperty(obj,‘b’,{
configurable: false,// Can not be deleted
enumerable: false,// Cannot be deleted
writable： true,// The value can be modified
value: ‘22’,// Set up b by 22
set: function(newValue){
console.log(‘ new value by ’+ newValue);
value = newValue;
},
get: function(){
console.log(‘ You set up. value’);
return value;
},
})
console.log(Object.getOwnPropertyDescriptor(obj,‘a’)); //{value: 1, writable: true, enumerable: true, configurable: true}

2、 Implement two-way binding ：
function vue(){
this.$data = {a: 1};// Set up data
this.el = document.getElementById(‘app’); // Set the root node
this.dom = ‘’;// fictitious dom
}

// Bind the listening method to the prototype
vue.prototype.observe = function(obj){
var self = this;
var value;
for(var key in obj){
value = obj[key];
if(typeof value === ‘object’){ // If it's an object You need a recursive loop to execute this method
this.observe(value);
}else{
Object.defineProperty(this.$data,key,{
get: function(){
// Rely on collection Skip here Replace the source code depend
return value;
},
set: function(newVal){
value = newVal;
self.render();// Trigger update Replace the source code dep.notify
}
})
}
}
}

vue.prototype.render = function(){
this.dom = ‘ I am a ’ + this.$data.a;
this.el.innerHTML = this.dom;
}

3、 Array listening implementation
vue The properties of arrays ： push shift unshift
Object is monitored through defineProperty, And arrays are created by dependArray
Object.create(proto,propertiesObject) // Method creates a new object , Using an existing object to provide a newly created object __proto__

var arrPro = Array.prototype;
var arrObj = Object.create(arrPro);
var arr = [‘push’,‘pop’,‘shift’];
// Decorator mode
arr.forEach(function(method,index){
arrObj[method]=function(){
var ret = arrPro[method].apply(this,arguments);
dep.notify();
return ret;
}
})

Vue3 The corresponding principle of data

let p = new Proxy(target, handler);
target: Target audience
handler: It's an object , Its property is a function that defines the behavior of the agent when an operation is performed .
handler The object methods commonly used in are as follows ：
receiver => this Proxy Object itself , That is to say this Point to ;

1. get(target, propKey, receiver)
2. set(target, propKey, value, receiver)
3. has(target, propKey)
4. construct(target, args)
5. apply(target, object, args)

It is written as follows ：
let a = new Proxy({},{
get: function(target,key,receiver){
return Reflect.get(target[key]);
//return target[key];
},
set: function(target, key, value, receiver){
return Reflect.set(target,key,value);
//return target[key] = value;
}
})

Object.defineProperty There are the following disadvantages ：

1. Methods listening to arrays cannot trigger Object.defineProperty Methods set operation ( If you want to listen , You need to rewrite the array method ).
2. You have to traverse every attribute of every object , If objects are deeply nested , You need to use recursive calls .

Proxy comparison defineProperty difference ：
1、 The parameters are different ,defineProperty The second parameter needs to specify the specific of the operation object key value , and Proxy Specifies the outermost object , This eliminates the cycle ;
2、defineProperty The object itself is manipulated , Changed the object itself , and Proxy Is to change the object proxy , Return to new object ;
3、defineProperty You must define a global variable at the outermost layer value, adopt get Put it return get out , and Proxy Put the return value into the parameter , direct return target[key];

Diff Algorithm and virtual dom

notes ：virtual dom It's a virtual layer , It doesn't officially exist

diff The algorithm is to compare elements directly , The element contains props and children, Go all the way to the root node ,template All nodes in the will have a diff, Mount a series of bound properties , Listen for changes by traversing the loop , stay vue3 The author changed this way , In the press conference, we talked about the comparison vue2 Speed up 6 times ,

vue2 The virtual dom, Will traverse all child nodes , All use diff The algorithm is compared once , Traversal speed is determined by dom Quantity determination ;

vue3 Will find the items that change , Update only changes ;