框架原理 —— mini-vue
category
Web
date
Mar 8, 2023
icon
slug
framework-mini-vue
status
Published
summary
原文链接：https://const_white.gitee.io/gitee-blog/blog/vue/mini-vue
tags
JavaScript
type
Post
概念图
响应式原理每个组件实例都对应一个watcher实例，会在组件渲染的过程中把“接触”过的数据 property 记录为依赖。之后当依赖项的 setter 触发时，会通知watcher，从而使它关联的组件重新渲染。
架构
Vue类负责把data中的属性注入到Vue实例，并调用Observer类和Compiler类。
Observer类负责数据劫持，把每一个data转换成getter和setter。其核心原理是通过Object.defineProperty实现。
Compiler类负责解析指令和插值表达式（更新视图的方法）。
Dep类负责收集依赖、添加观察者模式。通知data对应的所有观察者Watcher来更新视图。在Observer类把每一个data转换成getter和setter时，会创建一个Dep实例，用来负责收集依赖并发送通知。在每一个data中在getter中收集依赖。在setter中通知依赖，既通知所有Watcher实例新视图。
Watcher类负责数据更新后，使关联视图重新渲染。