Don't think the data has changed , Interface updates , Of course
It's not a matter of course , There are a lot of packages inside
<body> <div id="app"> {{message}} </div> <script src=
"./node_modules/vue/dist/vue.js"></script> <script> const app = new Vue({ el:
"#app", data:{ message:'hahaha' } }) </script> </body>
The browser will display hahaha

When changing at the console message When , The browser interface will be updated

Several problems to be considered
1.app.message Modify data ,vue How to monitor inside message Data changes for ?
Object.defineProperty -> Change of listening object property

2. When the data changes ,vue How do I know who to notify of an interface update ?
Publish subscriber mode
const app = new Vue({ el:"#app", data:{ message:'hahaha', name:'minmin' } })
hold data Object passed Vue inside , Once in , We will do the following things internally
const obj = { message: 'hahaha', name: 'minmin' } Object.keys(obj).forEach(key
=>{ let value = obj[key] Object.defineProperty(obj,key,{ set(newValue){ console.
log(' monitor '+key+' Change of '); value=newValue }, get(){ console.log(' obtain ' + key + ' Corresponding value ');
return value } }) })
Get one inside obj Object of , Traverse , Get each one key Corresponding value , Now listen for value changes ? use Object.defineProperty
To monitor , to obj Object defines a key Properties of ,obj The original property is not easy to monitor , So redefine it .
Now tell people , Who's going to use what's being monitored . Tell Whoever uses it , How do we know who's using it ? According to the analysis html Who are the useful properties obtained by the code , Called when getting the value get
, Once I find out value Change , Call on notification get People of . It's the publisher subscriber model , That is to make the call get Change of subscription properties of .
<div id="app"> {{message}} // Zhang San {{message}} // Li Si {{message}} // Wang Wu {{name}} </
div> // Publisher class Dependency{ constructor(){ // This array is used to record who wants to subscribe to the property this.subscribes=[]
} // Add people to subscribe to , After informing them , They will update addSub(watcher){ this.subscribes.push(watcher) }
// Value changed , Get all the subscribers , Update on notification notify(){ this.subscribes.forEach(item=>{ item.update()
}) } } // subscriber class Watcher{ // Create people to subscribe to constructor(name){ this.name=name; }
update(){ console.log(this.name+' happen update'); } } // call constructor const dep=new
Dependency() // Who called get Just create Watcher const watcher1=new Watcher(' Zhang San ') dep.addSub(
watcher1) dep.notify()
Add multiple subscriber objects to the publisher , The publisher just needs to call `notify()``, Notify all subscribers immediately , Let him update his update, Update your own interface .

Observer The thing to do is Object.defineProperty, Hijack properties , Get it Object.key
, Every attribute needs to be hijacked , One attribute corresponds to the creation of one Dep object ,
name -> Dep object -> subs -> [watcher1,watcher2]

Technology
©2019-2020 Toolsou All rights reserved,
( Essence )2020 year 7 month 15 day Wechat applet assembly Component Use of subversion ! Never take a nap longer than this time ! Watch out for fatal diseases …python read , write in txt Text content 【JAVA】【 Huawei campus recruitment written examination - Software 】2020-09-09mysql Recursively finds all child nodes of the parent class ToastUtils Use of keras Data generator -- Data enhancement vue use vue-clipboard2 Realize the function of copy link Thoughts on multi tenant system Obviously post Why does the request display parameters in the address bar ?