vue principles of responsive
When you put a plain JavaScript object instance as the incoming Vue data option, Vue will go through all of the properties of this object, and use Object.defineProperty these attributes all into getter / setter .
' Object.defineProperty Is not a shim ES5 feature, which is the reason Vue does not support IE8 and earlier versions of the browser.
These getter / setter for the user is not visible, but internally they let Vue able to track dependencies notice the change in the property is accessed and modified. Each instance corresponds to a watcher component instance, it will in the component
The rendering process "contacting" through the attribute data recorded as dependencies. When the dependency after the trigger setter, will inform the watcher, so that it re-render the associated components.
By such a long time to learn, I'll explain in detail the principles relatively straightforward with words
First of all we need to know two methods
One is Object.defineProperty, a design pattern is subscriber
Object.defineProperty方法
Object.defineProperty defines a new attribute directly on an object or modify existing properties of an object and return the object.
Object.defineProperty (obj, prop, descriptor) has three attributes. obj is to define the properties of objects. prop is necessary to define or modify the name of the property, descrptor is defined or modified attribute descriptor.
setter or getter js object is used to set the property or method to get the properties, he is in the creation of the object specified.
When the data object in the presence of a value, VUE will obtain this object, acquired when the object is invoked get, and will () method to get the data attribute of each object with Object.keys,
Then traversed obtained each property, and the property value set by the set and get methods Object.defineProperty or retrieving properties.
Publish - subscribe pattern
To give an example to illustrate publisher subscriber model. In the above example, it is to let Joe Smith and John Doe to subscribe to change the message attributes.
Publish - subscribe is a messaging paradigm sender of the message (called the publisher) does not send messages directly to a specific recipient (called subscribers). and
The announcement is divided into different categories, subscribers do not need to know which (if any) may be present. Also, subscribers can express interest in one or more categories,
Receive only messages of interest, without having to know what the publisher (if any) exist.
As an example, you focus on the micro-Bo A, while many others are also concerned about the A, then released when the A dynamic, microblogging will push this dynamic for you.
A publisher is, you are a subscriber, microblogging is the dispatch center, you and A are no direct exchanges of messages, all coordinated through a micro-blog (dynamic publishing your attention, A's).
vue is responsive to process data by this publisher subscriber model.
The following code just put the whole process responsive explain a bit, but the source is not so written, but the whole process is like this go drop, but I can simplify a lot of hope that we can understand ~ ~ Ha
// then by traversing the object obj to get this property ------
// Object.keys (obj) is returned in the form of an array of attributes of this object // represented by each key attribute Object.keys ( obj) .forEach (key => { // get this property the let value = obj [key] Object.defineProperty (obj, key, {
// set properties sET (newValue) { // can listen for changes in the key position = value newValue // dep.notify () and notify subscribers at this place were similar changes
<! - if changes were made, who need to get used to this value, if there are two people in a Joe Smith and John Doe , then you need to use parses each message,
based on the analysis html code to who to get in with these attributes, he is to get the message in the
time value of what he calls the get method, who with this message, who will get once retrieved, that time will be able to know who to call in the end of this message ,
once newValue is changed, it will notify the three men, and then will notify these three individuals, so that the three men at the interface update method --- get their update method
this time you need to use the release mode subscribers to listen, let the three men Subscribe to this property change ->
the console.log ( 'monitor' + key + 'change' + ':' + value) }, get() {
Create an object similar to a watch in this place. To acquire each subscriber
// const = wat1 new new Watcher ( 'Han Han');
the console.log ( 'Get' + key + 'value corresponding to' )
return value } }) }) // He will perform object in the set attributes, his name is set to 'hanhan' obj.name = 'hanhan'
We add more subscribers to the publisher objects inside, once the value changes, as long as the publisher to call his own notify, will immediately notice before all subscribers,
Subscriber is an array, where each member through the array, the array inside each member has a watch, notify subscribers to update their update. Then updated interface
// publisher class Dep { constructor() { // subscribe to an array, use the array to record all of the subscribers to the this .subscription = [] } // adding subscribers, this person added to the list, which is Zhangsanlisi, the two men an Addsub of (Watch) { the this .subscription.push (Watch) }; notify() { the this .subscription.forEach (Item => { // call its own unpate to update item.update () }) } } // observer for monitoring observe, create objects through this class, // subscribers class Watcher { constructor(name) { this.name=name; } update() { // put their content is updated console.log ( the this .name + 'occurred Update' ) } } // instance dep target const dep = new new Dep (); wat1 const = new new Watcher ( 'John Doe' ); dep.addSub (wat1) // Zhang was placed inside the array subscriber's subscription const wat2 = new new Watcher ( 'John Doe' ); dep.addSub (wat1) // John Doe was placed subscriber subscription array inside dep.notify () // defined herein notify, then just two subscribers, on the whole was to inform me }
Now I use a picture of the contents of the above are a summary of it, summed up quite superficial, surface knowledge of all, we hope that many instructions, a progress Kazakhstan.
observer data is mainly data object has been hijacked monitor, using Object.defineProperty, a property of an object corresponding to a dep, name objects have a dep, age there is a dep objects,
They are one to one relationship, each has his dep objects inside the object observer, the observer 1 and observer 2 ... when the property value changes will be to call in the dep notify, inform watcher, use watcher to update the view.
When el complie pass into the inside, mainly do two things
First, parse html, create corresponding watcher, the observer into the corresponding objects in the dep to go, how to put too specific, I have said above Ha,
Second, he will be based on the contents of the initialization el view, our analytical i.e. {{message}}, display "in the interface hee ."
If we attribute value of the name was changed in the 'ha ha', then the observer in Object.defineProperty listens to immediately change the value, call the notify method, traversing watcher, be update, and then update the view, the why becomes " Haha "