Introduction:
One of Vue's most unique features is its non-invasive and responsive system. The data model is just a normal JavaScript object. And when you modify them, the view will be updated. Simply put, data changes to view changes.
When you pass a normal JavaScript object to the data option of the Vue instance, Vue will iterate over all the properties of the object and use to convert all of these properties into getter/setter. It is a feature in ES5 that cannot shim, which is why Vue does not support IE8 and lower version browsers.
The following example is simulation, the underlying implementation principle of Vue data bidirectional binding
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>The underlying implementation of data bidirectional binding</title>
</head>
<body>
<button onclick="changeTest()">Click me to change</button>
<div >Hahaha</div>
<script>
let test={};
let middle='';
(test,'name',{
set(val){
('Trigger setter');//Trigger set when setting or modifying middle=val;
watcher();
},
get(){
('Trigger');//Trigger get when getting or using return middle;
}
})
function changeTest(){
="Change";//Trigger setter }
function watcher(){
('test').innerHTML=;//Trigger get }
</script>
</body>
</html>
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.