数据驱动视图
1. 命令式和声明式
* 命令式:命令机器去做,按照你的命令去执行;如:for循环
* 声明式:告诉机器你想要什么,让机器去完成;如:forEach
2. Observer函数和complie函数
* Observer函数
1. 劫持并监听所有属性 -- 在Observer函数中:完成getter和setter操作
2. 本质:
* vue2.0 采用Object.defineProperty()
* vue3.0 采用Proxy()
* 区别:
1. Proxy() 可以对整个对象进行劫持
2. defineProperty() 一个一个劫持。 数据:遍历进行劫持;对象:递归进行劫持
* complie函数 进行视图处理
3. 双向绑定实现步骤
1. 实现一个监听器Observer
* 对数据进行便利,每一个都加上getter和setter,给数据赋值的时候,触发setter从而实现数据的监听
2. 实现一个解析器complie
* 解析vue模板指令,将模板中的变量换成数据,初始化渲染页面
* 并将每个指令对应的节点绑定更新函数,添加监听数据的订阅者,一旦数据有变动,收到通知,调用更新函数进行数据更新
3. 实现一个订阅者Watcher
* Watcher订阅着是数据(Observer)和视图(complie)之间通信的桥梁
* 主要人物是订阅Observer中的属性变化的消息,当收到属性值变化的消息时,触发解析器Complie中的对应的更新函数
4. 实现一个订阅器 Dep
* 订阅器采用 发布--订阅 模式,用来收集订阅者Watcher,对监听器Observer和Watcher进行统一管理
Object.defineProperty()
- 语法 Object.defineProperty(obj, prop, descriptor);
- obj 要定义属性的对象
- prop 要定义或修改的属性名称
- descriptor 要定义或修改的属性描述符(是一个对象)
Proxy()
- 定义
- 监听某个对象,把监听的对象克隆一份给Proxy代理
- 原对象没有变化。该Proxy()构造函数用于创建Proxy()对象
2.语法
- new Proxy(target, handle)
- target: 要包装的目标对象Proxy,它可以是任何类型的对象
- handle: 一个对象,其属性是定义对Proxy执行操作时的行为的函数
- 注意