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,
It's unexpected Python Cherry tree (turtle The gorgeous style of Library )Unity3D of UGUI Basics -- Three modes of canvas os Simple use of module computer network --- Basic concepts of computer network ( agreement , system )html Writing about cherry trees , Writing about cherry trees Some East 14 Pay change 16 salary , Sincerity or routine ?Unity-Demo Examples ✨ realization UI- Backpack equipment drag function 06【 Interpretation according to the frame 】 Data range filtering -- awesome java Four functional interfaces ( a key , simple )