深度解剖 Vue3 架构:编译时 + 运行时的协作

架构设计

vue源码主要包括如下几个核心包

  • 编译时
    • compiler-core 编译的核心模块,负责将模版转为渲染函数render
    • compiler-dom 在core的基础上增加了对浏览器环境DOM的处理
    • compiler-sfc 用来处理单文件组件,使用compiler-dom将模版编译为渲染函数
  • 数据响应式
    • reactivity 包括响应对象API,追踪依赖,依赖触发的逻辑
  • 运行时
    • runtime-core 负责创建组件实例,处理组件生命周期,生成虚拟DOM,更新DOM的diff算法等
    • runtime-dom 在core的基础上增加浏览器环境对DOM的支持

运行时和编译时

这里参考《Vue.js 设计与实现》的例子

  1. 运行时

    1. 运行时可以理解为,将一个数据通过渲染函数,渲染为真实的DOM结构,这个过程就是运行时

    2. 纯运行时存在性能瓶颈(因为一般是将写好的代码字符串交给渲染函数解析运行);同时无法做静态分析(没有办法检查代码)

    JavaScript 复制代码
    const obj = {
      tag: "div",
      children: [{ tag: "span", children: "hello world" }],
    };
    Render(obj, document.body)
  2. 编译时

    1. 编译,比如C语言的编译成汇编语言,或者机器码,本质是从一种更高级简洁的语言转换为了另一种更低级复杂的语言

    2. 上面的例子中,使用对象表示时,书写比较困难,如果能有一种书写方式,符合人的直觉,且可以转换为对象,就能提升编写体验。而其中的转换过程,就是编译,在Vue中就是将模版语法转换为渲染函数

    JavaScript 复制代码
    const code = `
    <div>
      <span>hello world</span>
    </div>
    `
    compile(code)
    // 转换为 obj
    const obj = {
      tag: "div",
      children: [{ tag: "span", children: "hello world" }],
    };
  3. 编译时+运行时

    1. 结合两者优点,支持静态分析和动态性

    JavaScript 复制代码
    const code = `
    <div>
      <span>hello world</span>
    </div>
    `
    // 编译时
    compile(code)
    // 转换为 obj
    const obj = {
      tag: "div",
      children: [{ tag: "span", children: "hello world" }],
    };
    // 运行时
    Render(obj, document.body)

编译时

Vue3 编译过程涉及多个模块的协同工作,主要包括 compiler-corecompiler-domcompiler-sfc。同时在打包阶段使用到vue-loader或者vite-plugin-vue生成JavaScript模块

整体流程

流程简述

  • compiler-sfc 负责处理单文件组件(SFC)
    • 解析 SFC 文件: 使用 parse 函数将 .vue 文件解析成 SFCDescriptor 对象。这个对象包含了 templatescriptstyles 等部分。
    • 处理模板: 如果存在模板部分,将其传递给 compiler-corecompiler-dom 进行编译。
    • 生成代码: 将处理后的模板代码、脚本和样式组合成一个完整的组件对象,最终生成 JavaScript 代码。
  • compiler-core 主要负责将模版转换为渲染函数
    • 解析(Parser): 使用 baseParse 函数将模板字符串解析成抽象语法树(AST)。
    • 转换(Transform): 使用一系列转换插件(transforms)对 AST 进行转换,例如处理指令、插值和事件等。
    • 代码生成(Codegen): 将转换后的 AST 转换成 JavaScript 渲染函数。使用 generate 函数生成最终的渲染代码。
  • compiler-domcompiler-core 的一个扩展,针对浏览器环境进行了优化
    • DOM 特定的解析与转换: 处理与浏览器 DOM 相关的特性,例如 HTML 标签、属性和事件。compiler-dom 提供了一些特定于 DOM 的转换插件,这些插件在 compiler-core 的基础上进行扩展。
    • 平台特定优化: 通过优化特定于浏览器的代码生成,来提升性能。

运行时

运行时的核心是渲染器的设计,在runtime-core包中,runtime-dom增加了一些浏览器环境DOM的支持,比如Transition组件、v-modelv-on等等

渲染器设计

渲染器的源码在:packages/runtime-core/src/renderer.ts

渲染器是baseCreateRenderer返回的对象

渲染函数是返回对象的render属性

渲染器中最重要的是diff算法,分为

  • 简单diff
  • 双端diff
  • 快速diff(也是vue3现在使用的)

关于这部分,后续作者学会了再更新😂

相关推荐
东风西巷35 分钟前
K-Lite Mega/FULL Codec Pack(视频解码器)
前端·电脑·音视频·软件需求
超级大只老咪1 小时前
何为“类”?(Java基础语法)
java·开发语言·前端
你的人类朋友4 小时前
快速搭建redis环境并使用redis客户端进行连接测试
前端·redis·后端
这里是杨杨吖4 小时前
SpringBoot+Vue医院预约挂号系统 附带详细运行指导视频
vue.js·spring boot·医院·预约挂号
深蓝电商API4 小时前
实战破解前端渲染:当 Requests 无法获取数据时(Selenium/Playwright 入门)
前端·python·selenium·playwright
bestcxx5 小时前
(二十七)、k8s 部署前端项目
前端·容器·kubernetes
鲸落落丶5 小时前
webpack学习
前端·学习·webpack
excel6 小时前
深入理解 3D 火焰着色器:从 Shadertoy 到 Three.js 的完整实现解析
前端
光影少年6 小时前
vue打包优化方案都有哪些?
前端·javascript·vue.js