Vue

一、为什么要有MVVM

在框架出现之前：

• 数据更新或视图更新之后，需要开发者主动去使用 DOM api 去修改或查询 DOM
• 同样的数据映射到不同的视图时，需要重写一套代码逻辑，复用性低
• 状态管理比较麻烦
• 大量的DOM操作使得业务逻辑繁琐冗长，代码的可维护性差

开发的痛点：视图（view）和数据（model）的绑定

• 将DOM操作隐藏，关注数据操作（Model），在数据和视图间做到同步（数据绑定和更新监听），不需要人为干预。
• 同样的数据可以方便地对应多个视图。
• 方便管理状态和路由
• 其他：
  • 方便地实现视图逻辑（声明式或命令式）
  • 方便地创建和连接、复用组件

二、响应式原理及思路

简单地说，view 通过DOM listener(比如输入事件)对 model进行绑定，model通过Directives（指令）与view进行绑定。
其中在model和view进行绑定是采用数据劫持结合发布者-订阅者模式的方式：

• 通过Object.defineProperty()来劫持各个属性的setter，getter;
• 在数据变动时发布消息给订阅者(视图)，触发相应的监听回调。

具体步骤：

observer：

1. 对 data 对象进行递归遍历，将所有属性都实现为存取器属性setter/getter
2. 在 getter 中将当前数据的使用者(即 watcher)加入当前数据的依赖队列
3. 当给 data 对象的某个属性赋值时，就会触发setter，在 setter 遍历当前数据的依赖队列, 将数据变化通知到每一个 使用者(即 watcher).

compiler：

1. 解析模板字符串，为节点创建 watcher
2. 通过 watcher 将节点中的变量替换为 data 中的对应属性值
3. 因为在这个过程中调用了数据的 getter, 这个数据的依赖队列就是会把这个 watcher 添加进去
4. 当数据更新时，setter 就会通知依赖队列里面的 watcher ，watcher 接受到新数据, 并将数据更新到DOM

watcher：

1. 是 observer和 compiler 之间通信的桥梁，主要做的事情是：

• 在自身实例化时, 在初始化节点的数据的同时将自己添加到数据的依赖队列
• 实现一个 update 方法, 数据更新调用setter，在数据的 setter 中调用该方法实现对DOM更新

MVVM：

作为数据绑定的入口，通过 compile 来解析编译模板, 为节点创建 watcher，watcher 通过 observer 来监听数据变化, 达到数据变化 => 视图更新；视图变化 => 数据model变更的双向绑定效果。