From the vue
Vue I believe everyone is very familiar with, how to use, I am not here to demonstrate, I believe that everyone is familiar with this than I am, today we say vUE MVVM principle, compare the code simple implementation. Vue.js uses getters and setters of Object.defineProperty to implement data binding in conjunction with the observer pattern. When passing an ordinary Javascript Object to a Vue instance as its data option, Vue iterates through its properties, turning them into getters/setters with Object.defineProperty. Getters/setters are invisible to the user, but internally they let Vue track dependencies and notify changes when properties are accessed and modified.
An Observer data listener that can listen for all attributes of a data Object and notify subscribers of any changes to the latest values. It is implemented internally using getters and setters for Object.defineProperty. Compile instruction parser, which scans and parses the instructions of each element node, replaces data according to the instruction template, and binds the corresponding update function. The Watcher subscriber, acting as a bridge between Observer and Compile, can subscribe to and receive notification of each property change, executing the corresponding callback function of the directive binding. The Dep message subscriber maintains an array internally to collect subscribers (Watcher). Data changes trigger the notify function, which calls the update method of the subscriber.
As you can see in the figure, when new Vue() is executed, the Vue enters the initialization phase. On the one hand, the Vue iterates over the attributes in the data option and converts them into getters/setters with Object.defineProperty to implement the data change listening function. On the other hand, Vue’s instruction compiler Compile scans and parses the instructions of the element node, initializes the view, and subscribes to Watcher to update the view, at which point Wather adds itself to the message subscriber (Dep), initialization complete.
When the data changes, setter methods in the Observer are fired, which immediately calls dep.notify (), and the Dep starts iterating through all the subscribers and calls the subscriber’s update method, which updates the view accordingly when notified. We need to achieve the above is the general function, to come to, nonsense do not say, immediately open
Defineproperty is what? !
React, Vue and Angular are all implemented in much the same way: data hijacking + published-subscribe. Object. DefineProperty is also provided in ES5. Of course, this is not compatible with IE8+, so Vue etc only supports IE8+.
Defineproperty is what? !
Also you MVVM principle simple implementation
The data was hijacked
DefineProperty vue features you can’t add attributes that don’t exist. Attributes that don’t exist don’t have get and set
Data brokers
In fact, it is more beautiful, direct, elegant, many benefits oh
Data compilation
Compile and parse the code in the {{}} you get
Release subscription
Data update view
Two-way data binding
Outline has been out, tomorrow fine knock!!