vue2双向绑定

297 阅读2分钟
  • @Author: yolo
  • @Date: 2021年6月24日
  • @status: TODO
  • @Description: vue2双向绑定的学习记录,结合代码实践:gitee.com/yunluo_orz/…

原理方法介绍

原理

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

ObjectDefineProperty

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

实现一个js的双向绑定

在set的时候动态修改DOME节点的内容实现双向绑定
1、为输入框绑定keyup事件
2、访问参数变量,触发get方法
3、渲染初始值
4、触发keyup事件,修改参数,触发Object.defineProperty()的set方法
5、在set方法中为所有使用了参数的dom节点进行修改

实现一个简单的双向绑定

DocuemntFragment

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

实现内容绑定

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

数据和视图绑定“数据劫持”

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

订阅/发布者模式

订阅/发布者模式: 发布者发出通知 => 主题对象收到通知并推送给订阅者 => 订阅者执行相应操作

数据修改更新视图

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

流程图

image.png