概念图

响应式原理

每个组件实例都对应一个 watcher 实例，会在组件渲染的过程中把“接触”过的数据 property 记录为依赖。之后当依赖项的 setter 触发时，会通知 watcher，从而使它关联的组件重新渲染。

架构

1. Vue类负责把data中的属性注入到Vue实例，并调用Observer类和Compiler类。

2. Observer类负责数据劫持，把每一个data转换成getter和setter。其核心原理是通过Object.defineProperty实现。

3. Compiler类负责解析指令和插值表达式（更新视图的方法）。

4. Dep类负责收集依赖、添加观察者模式。通知data对应的所有观察者Watcher来更新视图。在Observer类把每一个data转换成getter和setter时，会创建一个Dep实例，用来负责收集依赖并发送通知。在每一个data中在getter中收集依赖。在setter中通知依赖，既通知所有Watcher实例新视图。

5. Watcher类负责数据更新后，使关联视图重新渲染。

实现

文件目录结构

Vue

Observer

Compiler

Dep

Watcher

参考链接

1. mini-vue | Mirai 白 (gitee.io)