mini版vue3

113 阅读1分钟

一、整体工作流程 1.Compiler Module 编译器:编译器将视图模板编译为渲染函数 2.Reactivity Module 数据响应式模块:数据响应模块将数据对象初始化为响应式数据对象 3.Rendered Module 渲染函数:视图渲染 a.RenderPhase:渲染模块使用渲染函数根据初始化数据生成虚拟Dom b.MountPhase:利用虚拟Dom创建视图页面html c.PatchPhase:数据模型一旦变化渲染函数将再次被调用生成新的虚拟Dom,然后做Dom diff更新视图html

二、编译器原理 简单的说就是 输入:视图模板 输出:渲染函数 细分起来还可以分为三个小步骤 •Parse模板字符串>>AST抽象语法树 •Transform转换标记比如v-bind v-if v-for的转换 •Generate AST>>渲染函数