Vue响应式原理---双向绑定

一、Vue中的响应式

Vue最独特的特性之一，是其非侵入行的响应式系统。数据模型仅仅是普通的JavaScript对象，而当修改它们时，视图会进行更新。

二、响应式的基本原理—双向绑定

双向绑定，就是把Model绑定到View，当我们用JavaScript代码更新Model时，View就会自动更新，在单向绑定的基础上，如果用户更新了View，Model的数据也会自动更新。

双向绑定由三个重要部分构成：

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

ViewModel

作用：

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

它还有两个主要部分组成：

• 监听器（Observer）：对所有数据的属性进行监听
• 解析器（Compiler）：对每个节点的指令进行扫描跟解析，根据指令模板替换数据，以及绑定相应的更新函数

双向绑定的基本原理

1. 通过Object.defineProperty来实现监听数据的改变和读取（属性中的setter和getter方法）实现数据劫持。

2. 观察者模式（发布者 - 订阅者）
   观察者（订阅者）Watcher：
   update()：当事件发生时，具体要做的事情。
   目标（发布者）Dep:
   （1）subs数组：存储所有的观察者
   （2）addSub()：添加观察者
   （3）notify()：当事件发生时，调用所有观察者的update()方法

3. 当数据发生改变通过发布者-订阅者模式来进行通知，进行试图更新。

三、响应过程

Vue中的data的每个属性都会被创建一个Dep对象，并且解析el是进行视图的初始化，如果html中有多个地方用到该属性，则每个地方都会生成一个Watcher的实例被放入到该属性对应Dep实例中的subs数组中。当属性发生变化时，Observer监听到属性的改变，然后调用该属性对应的Dep实例的notify()方法，对Dep实例中的数组进行遍历，同时调用遍历出的Watcher实例进行update()方法的调用，进行视图的更新。

参考链接：https://wenku.baidu.com/view/6ca3cedb07a1b0717fd5360cba1aa81144318f24.html