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. 当数据发生改变通过发布者-订阅者模式来进行通知，进行试图更新。

三、响应过程

首先要对数据（data）进行劫持监听，所以需要设置一个监听器Observer，用来监听所有的属性。
如果属性发生变化，需要通知订阅者Watcher，看是否需要更新。因为订阅者有多个，所以需要一个消息订阅器（发布者）Dep（订阅者集合的管理数组）来专门收集这些订阅者，在Observer和Watcher之间进行统一管理。
还需要一个指令解析器Compile，对每个节点元素进行扫描和解析，将相关指令初始化为一个订阅者Watcher，并替换模板数据或绑定相应的函数，此时当订阅者Watcher接收到相应属性的变化，就会执行对应的更新函数，从而更新视图。

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

总结为以下三个步骤：
1、实现一个监听器Observer，用来劫持并监听所有属性，如果发生变化，就通知订阅者。
2、实现一个订阅者Watcher，可以收到属性的变化通知并执行相应的函数，从而更新视图。
3、实现一个解析器Compile，可以扫描和解析每个节点的相关指令，并据此初始化视图和订阅器Watcher。

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