手写迷你Vue

151 阅读1分钟

文章内容输出来源:拉勾大前端高薪训练营

迷你Vue

外部入口

代理外部传入的data数据

使用Observer对外部传入的数据做数据劫持

使用Compiler解析指令和插值表达式

编译器Compiler

服务于迷你Vue

用于编译html模板

处理指令时,调用订阅者Watcher实现视图的更新订阅。

数据劫持观察员Observer

服务于迷你Vue

用于将Vue委派的数据转换为响应式数据。

在外部获取数据时使用发布者Dep来收集依赖。

在外部更新数据时使用发布者Dep通知所有订阅者Watcher,以便其实时更新视图。

订阅者Watcher

间接服务于迷你Vue

会在编译器Compiler中处理指令时用来绑定视图更新函数

创建订阅者时,将订阅发布者Dep发布的指定key产品变化情况

当key产品变化时,调用自己的更新函数来完成视图的更新。

发布者Dep

存放着所有的订阅者Watcher

拥有接收订阅者Watcher向其进行订阅的方法。

用于向所有订阅者Watcher发送key产品变化的通知方法。

  • 会被数据劫持观察员Observer用于通知所有的观察者Watcher其所订阅的key产品变化了。