数据驱动视图设计
2022-04-01 12:33:04 6 举报AI智能生成
vue2
作者其他创作
大纲/内容
声明式和命令式
命令式编程
命令“机器”如何去做事情(how)，这样不管你想要的是什么(what)，它都会按照你的命令实现
例如：for循环
声明式编程
告诉“机器”你想要的是什么(what)，让机器想出如何去做(how)
例如：数组内置方法forEach等
两大函数
Observer 函数
劫持并监听所有属性
在 Observer 函数中：完成 getter 和 setter 操作
本质
VUE 2.0
主要采用 Object.defineProperty()
VUE 3.0
主要采用 Proxy()
区别
Proxy 优势 在于 不用每一个属性都进行劫持； 他是整个对象的劫持
defineProperty：是一个一个劫持
监听后，根据监听属性的变化，进行相关处理
complie函数
进行视图处理的
实现双向绑定的步骤
1、实现一个监听器 Observer：
对数据对象进行遍历，包括子属性对象的属性，利用 Object.defineProperty() 对属性都加上 setter 和 getter。
这样的话，给这个对象的某个值赋值，就会触发 setter，那么就能监听到了数据变化。
2、实现一个解析器 Compile：
解析 Vue 模板指令，将模板中的变量都替换成数据，然后初始化渲染页面视图，
并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，调用更新函数进行数据更新。
3、实现一个订阅者 Watcher：
Watcher 订阅者是 Observer 和 Compile 之间通信的桥梁 ，
主要的任务是订阅 Observer 中的属性值变化的消息，当收到属性值变化的消息时，触发解析器 Compile 中对应的更新函数。
4、实现一个订阅器 Dep：
订阅器采用 发布-订阅 设计模式，用来收集订阅者 Watcher，对监听器 Observer 和 订阅者 Watcher 进行统一管理。
Observer原理模拟
0 条评论
下一页
为你推荐
查看更多
