Anyone who is familiar with vue knows that they used it beforeTo implement two-way data binding
In vue 3.0, this method was replaced
1. Why replace it
Replacement is not because it is bad, but because there is a better way to use it more efficiently
Disadvantages:
1. In Vue,
The changes in array subscript cannot be monitored.
This results in setting the value of the array directly through the subscript of the array, and cannot respond in real time.
push() pop() shift() unshift() splice() sort() reverse()
2. Only hijack the properties of the object, so we need to traverse each property of each object.
In Vue, data monitoring is achieved through recursion and traversal of data objects.
If the attribute value is also an object, then deep traversal is required. Obviously, if a complete object can be hijacked, it will have a great improvement in both operability and performance.
And the Proxy that replaces it has the following two advantages:
1. The entire object can be hijacked and a new object can be returned
2. There are 13 types of hijacking operations
2. What is Proxy
Proxy is a new feature added in ES6. It translates to "proxy", which means "proxy" certain operations. Proxy allows us to control external access to objects in a concise and easy-to-understand way. Its function is very similar to the proxy mode in design mode.
Proxy can be understood as setting up a layer of "intercept" before the target object. All external accesses to the object must be intercepted first, so it provides a mechanism to filter and rewrite external access.
The core advantage of using Proxy is that it can be handed over to handle some non-core logic (such as: logging the log before reading or setting certain properties of an object; verifying before setting certain properties of an object; access control of certain properties, etc.). This allows objects to only focus on core logic, achieve the purpose of separation of concerns, and reduce object complexity.
Basic usage:
let p = new Proxy(target, handler);
parameter:
target: is a proxy object wrapped in Proxy (can be any type of object, including native arrays, functions, or even another proxy).
handler: is an object that declares some operations of the proxy target, and its properties are functions that define the behavior of the proxy when an operation is performed.
p is a Proxy object. When other operations change p, the handler object method will be executed. Proxy has 13 data hijacking operations, commonly used handler processing methods:
get: read the value,
set: get the value,
has: determine whether the object has this property.
construct: constructor
For example:
let obj = {};
let handler = {
get(target, property) {
(`${property} Being read`);
return property in target ? target[property] : 3;
},
set(target, property, value) {
(`${property} Set to ${value}`);
target[property] = value;
}
}
let p = new Proxy(obj, handler);
= 'tom' //name is set to tom ; //age Being read 3
More Proxy attribute method referenceMDN Proxy
3. Proxy implements data hijacking
observe(data) {
const that = this;
let handler = {
get(target, property) {
return target[property];
},
set(target, key, value) {
let res = (target, key, value);
[key].map(item => {
();
});
return res;
}
}
this.$data = new Proxy(data, handler);
}
This code proxys the object returned by the proxy tothis.$data,Right nowthis.$dataIt is the object after the proxy, every time the external pair isthis.$dataWhen performing operations, the method on the handler object in this code is actually executed.
Note: The reflect attribute is used here, which is also from ES6. If you don’t know, go here to have a look.reflect property
Summarize
The above is the two-way data binding method and advantages and disadvantages in vue 3.0 that the editor introduced to you. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply you in time. Thank you very much for your support for my website!
If you think this article is helpful to you, please reprint it. Please indicate the source, thank you!