Hello, everyone, I am front-end encouragement teacher Maybe, as a front-end, master VUE framework can be said to be a must drop, then VUE two-way data binding principle must be a knowledge point to understand, then you understand the principle of two-way binding is what? Anyway, please give me time for one song, SO that I can explain the whole process of a wave of bidirectional binding in an official tone. In the remaining half of the song, I can explain a wave in my own words. I hope that after reading my article, you will have a further understanding and understanding of the principle of bidirectional data binding of VUE!
Specific steps
The first step is to recursively traverse the observer data object, including the attributes of the child property object, with setters and getters such that assigning a value to that object will trigger the setter, so that it can listen for changes in the data
Step 2: Compile parses the board commands and replaces variables in the template with data. Then initialize the render page view, bind each node to the corresponding update function, add subscribers to listen for data, and update the view when the data changes
Step 3: The Watcher subscription name serves as a bridge between the Observer and Compile. It does the following: 1. Add yourself to the attribute scheduler (DEP) when instantiating itself 2. It must have an update() method 3. If you can call your own update() method and trigger a callback in Compile, then you are out of the game
Step 4: As a data binding portal, THE MVVM includes the Observer, Compile and Watcher for the variations of their model data, and Compile template commands as well. Finally, Watcher is used to build the communication beam between Observer and Compile to achieve the bidirectional binding effect of data change – > view update: View interactive Change (Input)- > data mode change.
In order to understand the principle of vUE’s two-way data binding, you must first understand the difference between MVC and MVVM mode and then understand the principle of VUE’s single data binding. Next, I will explain to you in the way of combining pictures and text:
1. Differences between MVC and MVVM:
2. Single item data binding principle of Vue:
Vue two-way data binding principle, vUE two-way data binding principle, when the page has an input element, this is the v-Model two-way data binding principle. See the picture below:
After the above wave of SAO operation, I hope you can meet the question of VUE two-way data binding principle in the interview, can answer fluently, answer as complete as possible, if THERE is any place I missed, please point out in the comment area, learn from each other!