Vue Responsive principle
Do not think that data changes, along with the interface update for granted.
Look:
Examples are as follows:
Ha ha ha show, but when we change the message, change accordingly
After the addition of several message, the page also change accordingly been
The question is:
(1) app.message modify data, how the data inside Vue is listening message?
Change> monitor object properties - * Object.defineProperty
Once your obj the name change:
When obj.name = "kobe", listen for changes in the set method name
(2) when the data changes, how Vue know who to notify, the interface refresh happen?
* Publish-Subscribe design pattern
After listening name change, to tell who? Who is to tell who and who with?
For each defined using a name, who will once again get method invocation, so we know who is using
Defined Publisher
subs property filled with watcher of all subscribers
Definition of subscribers
In the get method, create watcher (because who is using a get who is the subscriber)
const dep = new Dep();
const w1 = new Watcher ( 'John Doe');
dep.addSub (w1); // add subscribers
const w2 = new Watcher ( 'John Doe');
dep.addSub (w2); // add subscribers
In the set method, call the notify method dep
dep.notify (); // notify all subscribers
Each property will be in obj Object Creates a dep
Use graphic:
