When interviewing some big companies, the interviewer may ask you what is the principle of Vue two-way data binding? Some friends don't know what it is, so you are greatly discounted in the eyes of the interviewer. Today, Xiaoqian will introduce to you the two-way binding principle of vue, don't miss it.
Vue two-way binding
In fact, everyone is not unfamiliar with this issue. The mvvm mode is adopted in vue. The built-in vm associates the view layer with the model layer. Changes in either party will affect the other party. After answering, the interviewer will continue to ask questions, please answer what is the principle behind two-way data binding that you understand? Today we will discuss some of the ways behind vue.
The so-called to achieve two-way data binding, Vue uses a publish-subscribe model internally. Internally, it combines Object.defineProperty, a new feature of ES5 (ie8 browser does not support it...), and intercepts the data passed in by vue, and dynamically adds get and set methods to it. When the data changes, the corresponding set method is triggered. When the set method is triggered, the watcher is further triggered internally. When the data changes, the virtual dom is compared, the render is executed, and the subsequent view update operation is completed.
Come on, take a look at the picture directly.
Okay, after analyzing the principle, let's take a look at the es5 method, Object.defineProperty, what is it useful for?
Run the above code:
when it is running, it is not difficult to find that when the content in the input box changes, the value in the p tag will also change accordingly. The reason is because when the content of the input box changes, we get the value of the input box, and then assign it to the object.msg property. In this way, the set method of the msg attribute of the object will be executed, thereby changing the corresponding content value.
Then when we modify the data in the future, will the view be automatically updated?
In this way, a timer is adjusted. After 2s, the data of the object is modified, and the object data is changed, which will trigger the set method, realize the response data change, and the view will also become the value of hello-world. In fact, this is the process of intercepting data with the help of Object.defineProperty in vue.
Additional tips
The Object.defineProperty used in vue 2.x for data interception is actually flawed
1. New addition or deletion of object attributes cannot be monitored;
2. The addition and deletion of array elements cannot be monitored.
Then why not solve it in 2.x, consider from two points:
1. Performance: It is monitored by traversing the properties of the object, but the property value is also the object and needs to be traversed in depth. At this time, it is obviously better to hijack the complete object
2. Unable to monitor the array: the attribute value is changed to the array, the array is also regarded as a special object, the subscript is actually the attribute of the object, theoretically it can be passed
Object.defineProperty handles it, so why not use this method? It is guessed that it is derived from the usage scenario of the array. The main operation scenario of the array is traversal. If each element is mounted with set and get methods, huge performance will be produced. Consumption, and the array index changes frequently, and most of the operation methods are used. Once the array length changes, manual update will be a rather tedious task in a state that cannot be automatically detected.
So how is the hijacking of arrays implemented in vue? The 7 commonly used array operations are rewritten, namely push(), pop(), shift(), unshift(), splice(), sort(), reverse(), where Vue.set() actually calls the splice method to process the array.
For the shortcomings of Object.defineProperty, ES6 Proxy can solve it perfectly. Its only shortcoming is that it is not friendly to IE, so if vue3 detects that it is using IE (yes, IE11 does not support Proxy), it will The data monitoring system is automatically downgraded to Object.defineProperty.
So at this point, congratulations! You have understood the principle of two-way data binding in vue2.x.