vue2双向绑定原理

vue2双向绑定

原理方法介绍

原理

vue双向绑定是通过“数据劫持”结合“发布者订阅”模式的方式来实现的，也就是说数据和视图同步，数据发生变化，视图也发生变化，视图变化，数据也随之改变。

01_ObjectDefineProperty

Object.defineProperty(obj, prop, descriptor)中有三个参数
obj ： 要定义其属性的对象
prop ： 要定义或者修改的属性
descriptor ： 具体改变的方法
descriptor可以定义get和set方法在获取和修改值的时候触发对应的函数

实现一个js的双向绑定

在set的时候动态修改DOME节点的内容实现双向绑定
1、为输入框绑定keyup事件 [ Q1：这就是为什么双向绑定只能用于表单元素 ]
2、访问参数变量，触发get方法
3、渲染初始值
4、触发keyup事件，修改参数，触发Object.defineProperty()的set方法 [ Q2：这里是如何获取使用了该节点的全部dome节点 ]
5、在set方法中为所有使用了参数的dom节点进行修改

实现一个真正的双向绑定

DocuemntFragment

碎片化文档：
document.createDocumentFragment()方法可以创建一个DocuemntFragment对象
每当向DocuemntFragment对象appendChid方法添加节点的时候，dom树中的对应节点会被删除

实现内容绑定

1、创建一个vue实例
2、碎片化文档，把实例的节点获取，判断每个节点的类型
3、根据节点类型，替换data中的内容显示对应的内容在页面上

数据和视图绑定“数据劫持”,view => model

数据绑定监听事件
修改输入框内容 => 在事件回调函数中修改属性值 => 触发属性的 set 方法。

订阅/发布者模式

订阅/发布者模式：[Q2解惑了]
发布者发出通知 => 主题对象收到通知并推送给订阅者 => 订阅者执行相应操作

数据修改更新视图,view => model

发出通知 dep.notify() => 触发订阅者的 update 方法 => 更新视图。
这里的关键逻辑是：如何将 watcher 添加到关联属性的 dep 中。

学习代码：https://gitee.com/yunluo_orz/st_define-property