• Vue 中双向绑定数据是什么？

双向数据绑定的概念

从单向数据绑定切入。把 Model 绑定到 View ，当用 JavaScript 代码 更新 Model 时， View 会自动更新。

双向数据绑定就是，在单向数据绑定的基础上，用户更新了 View ， Model 中的数据也会自动更新。

🌰 例子 / 填写表单：

当用户填写表单时， View 的状态就被更新了，如果此时可以自动更新 Model 的状态，那就相当于把 Model 和 View 做了双向绑定。

双向数据绑定的原理

Vue 是双向绑定数据的框架。双向绑定由三个重要部分组成：

• 数据层 / Model ：应用的数据以及业务逻辑；
• 视图层 / View ：应用的展示效果，各类 UI 组件；
• 业务逻辑层 / ViewModel ：框架封装的核心，负责将数据与视图关联起来；

这个分层的架构方案称为 MVVM。核心功能为 数据的双向绑定。

理解 ViewModel

主要职责：

• 数据发生改变后，更新视图
• 视图发生改变后，更新数据

由两个重要的部分组成：

• 监听器 / Observer ：对所有数据的属性进行监听；
• 解析器 / Compiler：对每个元素的节点的指令进行扫描和解析，根据指令模版替换数据，以及绑定响应的更新函数。

实现双向绑定

以 Vue 为例，看数据双向绑定的流程：

1. new Vue() 执行初始化，对 data 执行 响应化处理。这个过程发生在 Observe 中；
2. 同时对模版执行编译，找到其中动态绑定的数据，从 data 中获取并且初始化试图，这个过程发生在 Compiler 中；
3. 同时定义一个更新函数和 Watcher ，将来对应数据变化时， Watcher 会调用更新函数；
4. 由于 data 某个 key 在一个视图中可能会出现多次，所以每个 key 都需要一个管家 Dep 管理多个 Watcher ；
5. 将来 data 中的数据一旦发生变化，首先找到对应的 Dep ，通知所有的 Watcher 执行更新函数。

::: details:::

:::

Vue 的双向绑定原理

Vue 的双向绑定是通过 数据劫持 结合 发布者 - 订阅者模式 的方式来实现的，利用 Object.defineProperty() 这个方法重新定义了对象获取 属性值 和 设置属性值（ getter / setter ）。

参考

• 双向绑定 - 廖雪峰的官方网站 (liaoxuefeng.com) (opens new window)