Vue响应式原理

Vue响应式原理模拟

Vue的功能
1.记录传入的选项，设置 $data/$el
2.负责把 data 中的属性注入到 Vue 实例，并且转换成 getter/setter
3.observer 监听 data 中所有属性的变化
4.负责调用 compiler 解析指令/插值表达式

Observer的功能
1.数据劫持
负责把 data 中的成员转换成 getter/setter 负责把多层属性转换成 getter/setter 如果给属性赋值为新对象，把新对象的成员设置为getter/setter
2.添加 Dep 和 Watcher 的依赖关系
3.数据变化发送通知

Compile的功能
1.负责编译模板，解析指令/插值表达式
2.负责页面的首次渲染,当数据变化后重新渲染视图
compileText()负责编译差值表达式
compileElement()负责编译元素指令

Dep的功能
1.收集依赖，添加观察者(watcher)
2.通知所有观察者

Watcher的功能

1. 当数据变化触发依赖， dep 通知所有的 Watcher 实例更新视图
2. 自身实例化的时候往 dep 对象中添加自己