不要认为数据发生改变,界面跟着更新,是理所当然的
其实并不是理所当然的,内部其实做了很多封装
<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>
浏览器就会显示 hahaha

当在控制台改变message的值的时候,浏览器界面会跟着一起更新

要思考几个问题
1.app.message修改数据,vue内部是如何监听message的数据发生改变?
Object.defineProperty -> 监听对象属性的改变

2.当数据发生改变,vue是如何知道要通知哪些人界面发生更新?
发布订阅者模式
const app = new Vue({ el:"#app", data:{ message:'hahaha', name:'minmin' } })
把data对象传到了Vue内部,一旦传进去,内部会做下面这个事情
const obj = { message: 'hahaha', name: 'minmin' } Object.keys(obj).forEach(key
=>{ let value = obj[key] Object.defineProperty(obj,key,{ set(newValue){ console.
log('监听'+key+'的改变'); value=newValue }, get(){ console.log('获取' + key + '对应的值');
return value } }) })
内部拿到一个obj的对象,进行遍历,拿到每一个key对应的值,现在要监听值的改变?用Object.defineProperty
来监听,给obj对象定义一个key的属性,obj原来的属性不好监听,所以来重新定义。
现在要告诉别人,谁来用监听到的东西。谁用就告诉谁,那我们怎么知道谁在用呢?根据解析html代码获取到哪些人有用属性,获取值的时候会调用get
,一旦我发现value发生改变,就通知调用get的人。就是发布者订阅者模式,也就是让调用get的人订阅属性的改变。
<div id="app"> {{message}} //张三 {{message}} //李四 {{message}} //王五 {{name}} </
div> //发布者 class Dependency{ constructor(){ //这个数组用来记录谁要订阅属性 this.subscribes=[]
} //加进去要订阅的人,通知他们之后,他们会更新 addSub(watcher){ this.subscribes.push(watcher) }
//值发生改变了,拿到所有的订阅者,就通知更新 notify(){ this.subscribes.forEach(item=>{ item.update()
}) } } //订阅者 class Watcher{ //创建要订阅的人 constructor(name){ this.name=name; }
update(){ console.log(this.name+'发生update'); } } //调用constructor const dep=new
Dependency() //谁调用了get 就创建Watcher const watcher1=new Watcher('张三') dep.addSub(
watcher1) dep.notify()
把多个订阅者对象添加进发布者,发布者只要调用了`notify()``,立马通知所有的订阅者,让他更新自己的update,更新自己的界面。

Observer做的事情就是Object.defineProperty,对属性进行劫持,拿到Object.key
,每一个属性都需要劫持,一个属性就对应创建一个Dep对象,
name -> Dep对象 -> subs -> [watcher1,watcher2]

技术
©2019-2020 Toolsou All rights reserved,
css基础2:flex 多行均分有间隙布局基于RK3399 PWM驱动开发[work] python读取txt文件最后一行vue-countTo 操作大全(精华)2020年6月26日 C#类库 GUID帮助类PostgreSQL: 九. 索引(精华)2020年7月12日 webpack 常见插件的使用JQ get请求 拼接 url 参数 (查询条件)[AndroidO] [RK3399] -- GPIO驱动与控制方式unity 获取小车速度及前进或者后退