1. 什么是单向数据绑定？

数据模型（Module）和视图（View）之间的单向绑定

需要我们先写好模板，然后把模板和数据（可能来自后台）整合到一起形成 HTML 代码，然后把这段 HTML 代码插入到文档流里面。一旦 HTML 代码生成好了之后，就没有办法改变了。有新的数据出现或者修改，就需要修改代码。

2. 什么是双向数据绑定？

数据模型（Module）和视图（View）之间的双向绑定

视图 View 的变化能实时地让数据模型 Model 发生变化，而数据模型 Model 的变化也能实时更新到视图层 View。

3. 如何实现双向绑定？

双向绑定的原理主要依赖于观察者模式、数据劫持、发布 / 订阅模式和数据监听。

观察者模式：在这种模式下，数据模型（被观察者）和视图（观察者）之间存在关系。当数据模型的状态发生变化时，所有视图都会收到通知并进行更新。

数据劫持：通过使用 Object.defineProperty () 方法，可以劫持数据模型的属性读取和设置操作。这样，当数据发生变化时，可以触发相应的更新操作。

发布 / 订阅模式：数据模型作为发布者，视图作为订阅者。当数据模型的状态发生变化时，所有订阅者（视图）都会收到通知并进行更新。

数据监听：通过监听视图中的事件（如 input 变化），可以自动将视图中的变化更新到数据模型中，实现数据模型与视图之间的同步更新。

在 Vue.js 中，这种双向绑定是通过 MVVM 框架实现的，其中 V 代表视图，M 代表模型，VM 代表视图模型。通过数据劫持和发布 - 订阅模式，Vue 能够实现对数据的高效响应式更新，从而提高了开发效率和用户体验。

4.MVVM 模型

M：模型（Model） - 对应 data 中的数据，后端传递数据。

V：视图（View） - 页面、模版

VM：视图模型 （ViewModel）- Vue 实例对象

理解 ViewModel

ViewModel 的主要职责：

  • 数据变化后更新视图
  • 视图变化后更新数据

两个主要组成部分：

  • 监听器 （Observer）：对所有数据的属性进行监听
  • 解析器（Compile）：对每个元素节点的指令进行扫描跟解析，根据指令模板替换数据，以及绑定相应的更新函数
  • MVVM 本质上是 MVC 的改进版，它的核心思想是 双向数据绑定

Vue 双向数据绑定 - 图1

5.Vue 如何实现双向数据绑定？

采用数据劫持结合发布者、订阅者模式的方式，通过 Object.defineProperty () 来劫持各个属性的 getter，setter，在数据变动时发布消息给订阅者，触发相应的监听回调。从而实现数据的双向绑定。`

Vue 实现双向数据绑定的 3 个步骤：

  1. 实现一个监听器 Observer：对数据对象进行遍历，包括子属性对象的属性，利用 Object.defineProperty () 对属性都加上 setter 和 getter。这样的话，给这个对象的某个值赋值，就会触发 setter，那么就能监听到了数据变化。
  2. 实现一个解析器 Compile：解析 Vue 模板指令，将模板中的变量都替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，调用更新函数进行数据更新。
  3. 实现一个订阅者 Watcher：Watcher 订阅者是 Observer 和 Compile 之间通信的桥梁 ，主要的任务是订阅 Observer 中的属性值变化的消息，当收到属性值变化的消息时，触发解析器 Compile 中对应的更新函数。

Vue 双向数据绑定 - 图2