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

目录

1. MVVM

• 定义
• 优点
• 缺点

2. Vue2 双向绑定原理（数据响应式)

• 原理概述
• 数据劫持
• 发布与订阅

（一）MVVM

1. 定义：

MVVM 是 Model-View-ViewModel（模型-视图-视图模型）的缩写；是一种软件架构设计模式。

其中：

• Model：是数据模型，既后端传过来的数据；
• View：是视图层，既我们看到的页面；
• ViewModel：是连接Model和View的中间桥梁

在MVVM的框架下，View和Model是不能直接通信的，Model与View之间通过ViewMode关联。ViewModel负责将Model数据的变化显示到View上，将View的改变反馈到Model上。这就是我们常说的双向绑定数据机制。

2. 优点：

• 降低耦合：视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的"View"上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。
• 可重用性：可以把一些视图逻辑放在ViewModel层中，让很多View重用这些视图逻辑。
• 独立开发：开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计。
• 可测试：界面素来是比较难于测试的，测试可以针对ViewModel来写。

3. 缺点：

• 数据绑定使得 Bug 很难被调试。你看到界面异常了，有可能是你 View 的代码有 Bug，也可能是 Model 的代码有问题。
• 因为使用了dataBinding，增加了大量的内存开销，增加了程序的编译时间，项目越大内存开销越大。

那如何设计MVVM模型模型呢。需要解决两个关键问题：

• 如何知道数据更新。
• 数据更新后，如何通知变化。

下面就分别介绍vue是如何实现的以上两点，理解了这两点，基本上也就明白了双向绑定的机制。

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

1. 原理概述

Vue2 采用数据劫持结合发布者-订阅者模式的方式来实现数据的响应式，通过Object.defineProperty来劫持数据的setter，getter，在数据变动时发布消息给订阅者，订阅者收到消息后进行相应的处理。

要实现MVVM的双向绑定，就必须要实现以下几点：

• Compile—指令解析系统，对每个元素节点的指令进行扫描和解析，根据指令模板替换数据，以及绑定相应的更新函数
• Observer—数据的观察者,让数据对象的读写操作都处于自己的监管之下。当初始化实例的时候，会递归遍历data，用Object.defineProperty来拦截数据（包含数组里的每个数据）。
• Dep+Watcher—发布订阅模型，作为连接Observer和Compile的桥梁，能够订阅并收到每个属性变动的通知，执行指令绑定的相应回调函数，从而更新视图。

mvvm入口函数，整合以上三者，