什么是双向绑定？双向绑定的原理？如何实现双向绑定？

什么是双向绑定？我们先从单向绑定切入单向绑定非常简单，就是把 Model 绑定到 View，当我们用 JavaScript 代码更新 Model 时，View 就会自动更新双向绑定就很容易联想到了，在单向绑定的基础上，用户更新了 View，Model 的数据也自动被更新了，这种情况就是双向绑定<img src="https://img.bosszhipin.com/beijin/cms/4d266dd67595407d2f5cd2fd8a4c446bceb4162adcce9c8ed358cb008b64ac2adaf0d6be4b15459a86ef4bf2101c104f.png?x-oss-process=image/quality,q_60" alt="" data-href="" style="height: auto;"/>当用户填写表单时，View 的状态就被更新了，如果此时可以自动更新 Model 的状态，那就相当于我们把 Model 和 View 做了双向绑定关系图如下<img src="https://img.bosszhipin.com/beijin/cms/cceebbb7eaf2883af5fc0b47f032d6d3ceb4162adcce9c8ed358cb008b64ac2aed0df3c9f90148a09153c350af09985a.png?x-oss-process=image/quality,q_60" alt="" data-href="" style="height: auto;"/>双向绑定的原理是什么？我们都知道 Vue 是数据双向绑定的框架，双向绑定由三个重要部分构成<ul><li>数据层（Model）：应用的数据及业务逻辑</li><li>视图层（View）：应用的展示效果，各类 UI 组件</li><li>业务逻辑层（ViewModel）：框架封装的核心，它负责将数据与视图关联起来</li></ul>而上面的这个分层的架构方案，可以用一个专业术语进行称呼：MVVM这里的控制层的核心功能便是 “数据双向绑定” 。自然，我们只需弄懂它是什么，便可以进一步了解数据绑定的原理理解 ViewModel它的主要职责就是：<ul><li>数据变化后更新视图</li><li>视图变化后更新数据</li></ul>当然，它还有两个主要部分组成<ul><li>监听器（Observer）：对所有数据的属性进行监听</li><li>解析器（Compiler）：对每个元素节点的指令进行扫描跟解析,根据指令模板替换数据,以及绑定相应的更新函数</li></ul>实现双向绑定我们还是以 Vue 为例，先来看看 Vue 中的双向绑定流程是什么的<ol><li>new Vue()首先执行初始化，对 data 执行响应化处理，这个过程发生 Observe 中；defineReactive 时为每⼀个 key 创建⼀个 Dep 实例</li><li>同时对模板执行编译，找到其中动态绑定的数据，从 data 中获取并初始化视图，这个过程发生在 Compile 中；初始化视图时读取某个 key，例如 name1，创建⼀个 watcher1</li><li>同时定义⼀个更新函数和 Watcher，将来对应数据变化时 Watcher 会调用更新函数</li><li>由于 data 的某个 key 在⼀个视图中可能出现多次，所以每个 key 都需要⼀个管家 Dep 来管理多个 Watcher;由于触发 name1 的 getter 方法，便将 watcher1 添加到 name1 对应的 Dep 中</li><li>将来 data 中数据⼀旦发生变化,会首先找到对应的 Dep，通知所有 Watcher 执行更新函数；当 name1 更新，setter 触发时，便可通过对应 Dep 通知其管理所有 Watcher 更新</li></ol>流程图如下：<img src="https://img.bosszhipin.com/beijin/cms/6c155f92bf101d7f3474c8db1dc5a5f2ceb4162adcce9c8ed358cb008b64ac2a92d08620afbe4bc5b07a8d61e4550181.png?x-oss-process=image/quality,q_60" alt="" data-href="" style="height: auto;"/>实现思路<ol><li style="text-align: left;">defineReactive 时为每⼀个 key 创建⼀个 Dep 实例</li><li style="text-align: left;">初始化视图时读取某个 key，例如 name1，创建⼀个 watcher1</li><li style="text-align: left;">由于触发 name1 的 getter 方法，便将 watcher1 添加到 name1 对应的 Dep 中</li><li style="text-align: left;">当 name1 更新，setter 触发时，便可通过对应 Dep 通知其管理所有 Watcher 更新</li></ol>

DreamCoders/CoderGuide

内容风险标识

评论 (0)

DreamCoders/CoderGuide .gitee-modal { width: 500px !important; }

内容风险标识