Detailed explanation of the implementation principle of Vue2.0/3.0 two-way data binding
The implementation principle of Vue2.0/3.0 two-way data bindingTwo-way data binding simply means that changes in data can cause the page to re-render The principle of Vue2.0 ES5: Object.defineProperty intercepts data Simple small case
<body>
Name:
<span id="name"></span>
<br />
<input type="text" id="inputName" />
</body>
Changing the value of the input box changes the value in the span accordingly. The change in data can make the view
<script>
let obj = {
name:''
}
Object.defineProperty(obj,'name',{
get(){
return this.name //Note that the error demonstration cannot use this to form an infinite loop and a new value must be prepared},
set(val){
}
})
</script>
Correct writing
<script>
let obj = {
name: ""
};
let newObj = JSON.parse(JSON.stringify(obj));
Object.defineProperty(obj, "name", {
get() {
return newObj.name;
},
set(val) {
if (val === newObj.name) return; // Increase the judgment to optimize performance. If the new value is the same as the old value, return it. If it is different, re-assign the value newObj.name = val;
obServer();
}
});
// Re-assignment method function obServer() {
spanName.innerHTML = newObj.name; //Get the value of obj.name inputName.value = newObj.name;
}
obServer(); //Execute once at the beginning setTimeout(() => {
obj.name = "大左";
}, 1000);
</script>
Execution Logic 1. setTimeout executes 1 second later and modifies the data to trigger obj.name's set (val) 2. Get the latest value and give it to newObj.name to execute the obServer() method 3. Get the latest value and assign spanName.innerHTML = newObj.name; inputName.value = newObj.name;
The value of the input box changes and the value of the span box changes accordingly
inputName.oninput = function() {
obj.name = this.value;
};
This operation is called v-model in Vue Vue 2.0 shortcomings1. The original data needs to be cloned, otherwise the infinite loop is mentioned above 2. If we want to intercept get and set of data in an object, we need to set the attributes in the object one by one and listen to them separately. If there are multiple attributes, we need to loop through them and listen to them separately. Reverse look at the data in vue2.0
data(){
return {
obj:{}
}
}
this.obj.name='XXX' //This operation does not work because there is no name in obj at the beginning, so no monitoring is performed. This is caused by the second item aboveOK, let's take a look at it again. Features and benefits of 3.0Mainly used the proxy in SE6
<script>
let obj = {};
obj = new Proxy(obj, {
get(target, prop) {
console.log("D");
return target[prop];
},
set(target, prop, value) {
console.log("Z");
target[prop] = value;
}
}); //Monitoring the entire object does not require specifying attributes, which is equivalent to monitoring all attributes in the object. So just write the overall set get
</script>
1. Get obj.name to trigger get. There is no name here, but it can go because there is no value, so it returns undefine.
2. Set the name value to see the trigger set
3. Get obj.name again to see if there is a value
So no matter whether you have a certain attribute in the object now, because what is monitored here is the entire object, all the future ones in the object will make up for the shortcomings of 2.0 1. No need to clone 2. There is no need to set the properties of each object separately. Just set them for the entire object. It is clean and hygienic. Implement the above 2.0 operation again
<script>
let obj = {};
obj = new Proxy(obj, {
get(target, prop) {
console.log("D");
return target[prop];
},
set(target, prop, value) {
console.log("Z");
target[prop] = value;
obServer();
}
}); //Monitoring the entire object does not require specifying attributes, which is equivalent to monitoring all attributes in the object. So just write the overall set get
// Re-assignment method function obServer() {
spanName.innerHTML = obj.name; //Get the value of obj.name inputName.value = obj.name;
}
obServer(); //Execute once at the beginning setTimeout(() => {
obj.name = "大左";
}, 1000);
inputName.oninput = function() {
obj.name = this.value;
};
</script>
SummarizeThis is the end of this article about the implementation principle of Vue2.0/3.0 two-way data binding. For more relevant Vue two-way data binding principle content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future! You may also be interested in:
|
<<: The simplest MySQL data backup and restore tutorial in history (Part 2) (Part 36)
>>: How to quickly deploy an Elasticsearch cluster using docker
Recommend
Why the disk space is not released after deleting data in MySQL
Table of contents Problem Description Solution Pr...
Install MySQL 5.7.18 using rpm package under CentOS 7
I have been using MySQL recently. The article mys...
Sharing of experience on repairing MySQL innodb exceptions
A set of MySQL libraries for testing. The previou...
How to compile and install xdebug in Ubuntu environment
This article describes how to compile and install...
Detailed explanation of the sticky position attribute in CSS
When developing mobile apps, you often encounter ...
Several methods to solve the problem of MySQL fuzzy query index failure
When we use the like % wildcard, we often encount...
Key features of InnoDB - insert cache, write twice, adaptive hash index details
The key features of the InnoDB storage engine inc...
WeChat applet records user movement trajectory
Table of contents Add Configuration json configur...
MySQL date processing function example analysis
This article mainly introduces the example analys...
Detailed analysis of the problem of adding where conditions using left join in MySQL
Current demand: There are two tables, group and f...
Detailed deployment of Alibaba Cloud Server (graphic tutorial)
I have recently learned web development front-end...
Docker pull image and tag operation pull | tag
I re-read the source code of the Fabric project a...
How to display percentage and the first few percent in MySQL
Table of contents Require Implementation Code dat...
js to implement add and delete table operations
This article example shares the specific code of ...
How to add color mask to background image in CSS3
Some time ago, during development, I encountered ...