手写vue 核心原理

vue 原理图如下

class Vue 
    constructor(options){
     //1 通过属性保存选项数据
     this.$options = options ||{};
     this.$data = options.data ||{};
     this.$el = typeof options.el === 'string' ? document.querySelector(options.el):options.el;
     //2 把data 中的数据变成get和set
     this._proxyData(this.$data);
     //3 调用observer ,监听数据的变化
     new Observer(this.$data);
     //4 调用compiler 对象， 解析指令和差值表达式
     new Compiler(this);
    }

以上代码说明了各个类的作用 还少了dep 和 watcher
dep 的作用主要是收集watcher 和 通知watcher
watcher 的主要作用是更新视图

dep 一般在oberver 在 get 时进行收集 在set 时进行更新通知

watcher 一般是在 complier 进行视图更新

现在说说各个类的结构和作用 vue 类

1. 负责接收初始化的参数（选项）
2. 负责把data中的属性注入到vue实列， 转换成getter/setter
3. 负责调用observe 监听data 中所有属性的变化
4. 负责调用compiler 解析指令/差值表达式

compiler类

1. 负责编译模板，解析指令/差值表达式
2. 负责页面的首次渲染
3. 当数据变化时更新视图

Observer类

1. 负责把data中的属性转换成响应式属性
2. 把data中属性是对象， 也要将该属性转换成响应式属性
3. 数据发送变化发送通知

Dep类

1. 收集观察者
2. 通知所有观察者

watcher类

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