Vue双向数据绑定

## 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的改进版，它的核心思想是 **双向数据绑定**

![](https://static.cloudcare.cn/cloudcare-mrdoc/img/2024-07-25_171928_5442540.4122185770250014.png)

## 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 中对应的更新函数。

![](https://static.cloudcare.cn/cloudcare-mrdoc/img/2024-07-25_171938_3469970.07961303251771079.png)