For understanding of MVVM
Of the Model , View , the ViewModel , derived from three parts of MVC.
Model: layer represents the data model, data can also define and modify business logic operations in the Model,
View: on behalf of UI components, which is responsible for the data model into UI to show up,
ViewModel: is a synchronous View and Model objects.
In MVVM architecture, between the View and the Model no direct contact, but through the interaction between the interaction ViewModel, Model and ViewModel is bidirectional, so change View data will be synchronized to the Model, the data varies Model also react immediately to the View. (note)
By the way data binding ViewModel layer and the Model-View is connected up, and synchronization between the View and Model entirely automatic , without human intervention, so developers can focus on the business logic, the DOM does not require manual operation, not We need to focus on the state of the data synchronization issues, complex data state maintenance entirely unified management MVVM .
Vue.js principle of bi-directional data
Vue.js can be said that the best practices MVVM architecture, focusing on the MVVM ViewModel, not only do the two-way data binding , but also to compare a relatively lightweight JS library, API is simple and easy to use.
Vue.js is the use of Object.defineProperty getter and setter , combined with observer mode to achieve data binding . When the object is passed to a common Javascript Vue instance as its data option, Vue will traverse its properties, they are converted by Object.defineProperty getter / setter. Users do not see getter / setter, but internally they let Vue track dependent, when informed of the changes in the property is accessed and modified . ( Note: It is reported that the use of Proxy vue3.0 alternative Object.defineProperty )
Figure resolution:
Observer: data listener, able to monitor all the properties of the data object, can get the latest values are subject to change and notify the subscriber, the internal use of Object.defineProperty getter and setter to achieve.
Compile: command parser, which scans the role of each element and parsing instruction node, the replacement data according to an instruction template, and the corresponding binding update function.
Watcher: subscribers, as a bridge between Observer and Compile, and can subscribe and receive notifications for each attribute changes, the implementation of the appropriate callback command binding.
Dep: Message subscriber, maintaining an internal array used to collect subscribers (Watcher), data changes trigger notify function, and then calls the update method subscribers.
Implementation process:
When performing new Vue (), Vue entered the initialization phase, on the one hand Vue will traverse data option in the property, and use Object.defineProperty turn them into a getter / setter, for data change monitoring function; on the other hand, the Vue compile instruction translator instructions of element nodes scanning and parsing, initialize the view, and the view is updated Watcher subscription, then Wather will own the subscriber to the message (Dep), initialized.
When the data changes, getter method is triggered in Observer (note here what triggers), getter will be called immediately Dep.notify (), Dep traversing all subscribers, and invokes the update method subscribers, subscribers receive update the view of the corresponding notification. Similarly when the form input content changes, it will trigger setter, watcher mechanism will monitor the implementation, watcher notice Vue generate new VDOM tree, and then rendered by the render function to generate real DOM.
Simple two-way data binding achieved by Object.defineProperty see:
<body>
<div id="demo"></div>
<input type="text" id="inp">
</body>
<script>
let obj = {};
let demo = document.querySelector('#demo');
let inp = document.querySelector('#inp');
Object.defineProperty(obj,'name',{
get : () => {
return inp.value;
},
set : (newVal) => {//当该属性被赋值的时候触发
inp.value = newVal;
demo.innerHTML = newVal;
}
});
inp.addEventListener('input',(e) => {
// 给obj的name属性赋值，进而触发该属性的set方法
obj.name = e.target.value;
})
obj.name = 'huqinggui';//在给obj设置name属性的时候，触发了set这个方法
</script>
Why use Proxy vue3.0 alternative Object.defineProperty two-way data binding
Replaced not because of bad, because there is a better way to higher efficiency