vue响应式原理（数据双向绑定）

一、什么是数据双向绑定？

简单理解：我们先从单向绑定切入单向绑定非常简单，就是把 Model （数据）绑定到 View （页面），当我们用 JavaScript 代码更 新 Model 时， View 就会自动更新双向绑定就很容易联想到了，在单向绑定的基础上，用户更新了 View ， Model 的数据也自动被更新了，例如当用户填写表单时， View 的状态就被更新了，如果此时可以自动更新 Model 的状态，那就相当于我们 把Model 和 View 做了双向绑定。

二、数据双向绑定的原理是什么？

我们知道vue参考了mvvm的设计模式，数据双向绑定主要就是靠这三个部分来实现的。

数据层（Model）：应用的数据及业务逻辑

视图层（View）：应用的展示效果，各类UI组件

业务逻辑层（ViewModel）：框架封装的核心，它负责将数据与视图关联起来。

ViewModel主要提供了两个方向：

1、model和view的数据双向绑定，数据更新视图变化（v-bind）。

2、dom的事监听，视图变化数据更新（v-on）。

ViewModel的主要组成两部分：

监听器（Observer）：对所有数据的属性进行监听

解析器（Compiler）：对每个元素节点的指令进行扫描跟解析,根据指令模板替换数据,以及