第一节: Vue3 源码分析概述

vue3源码分析概览, 介绍源码工程的目录结构, 工程的启动, 以及源码调试,并且介绍了Vue3 runtime 运行时, reactivity 响应式, compile 编辑器三大系统, 为后续源码分析做准备

前端付杰

3091人浏览 · 2024-05-10 07:25:11

前端付杰 · 2024-05-10 07:25:11 发布

1. 前言

从Vue3正式发版开始到现在，已经有一段时间了。Vue3相比于Vue2，有着许多的优化和改进，其中最显著的是使用了Composition API。Composition API是一种新的API风格，它允许我们通过函数组合来实现逻辑复用和代码组织。同时，Vue3还提供了更好的性能和更灵活的响应式系统。

而我从正式发版Vue3开始, 就一直在使用Vue3进行项目开发, 搭配TypeScript开发, 让代码的可读性, 可维护型得到了很大的提升. 但也发现了很多弊端. 这个以后再说

在使用Vue3开发的过程中, 也抽时间对源码进行了分析, 了解源码中具体API的实现. 但笔记相对凌乱, 乘着最近不是太忙, 对笔记进行整理分享.

因为Vue版本还在更新迭代, 可能和我阅读的版本源码有所区别, 建议大家在阅读时, 对照分析.

2. vue 源码的下载

Vue 3 的源代码存放在其 Github 官方仓库上,地址: GitHub - vuejs/core: 🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

拉取源码到本地后, 执行pnpm 指令安装依赖

pnpm install

3. 目录结构

下载完Vue3源码以及依赖安装成功后, 就可以启动Vue3源码项目. 直接本地测试API,

在开始之前,我们先分析一下Vue源码目录结构

3.1. 源码目录

Vue 源码的目录结构比较清晰, 除了项目架构的配置文件,最主要的两个目录:

package: 源码目录,Vue3的源码都放在这里
scripts: Vue3的脚本文件, 用来存放配置文件,进行编译和打包

整个项目结构中, 我们主要分析源码, 至于其他的配置文件不是我们分析的重点, 有兴趣可以研究一下源码项目配置

而所有的目录中最核心的就是packages 目录 , Vue3 的源码存放在此目录中：

compiler-core: 编译解析核心,与具体环境无关,主要生成AST, 并根据AST生成render()方法
compiler-dom: 浏览器环境中模板解析逻辑, 如处理HTML转义, 处理v-model等指令
compiler-sfc: 负责解析Vue单文件组件
compiler-ssr: 服务端渲染环境中的模板解析逻辑
reactivity: 响应式数据相关逻辑,Proxy 就在这里面
runtime-core: 运行时与创建实例相关代码
runtime-dom: 浏览器环境中的运行时核心
runtime-test: 内部测试代码
server-renderer: 用于SSR服务端渲染的逻辑
shared: Vue3 工具库，一些通用方法
size-check: 用于测试tree shaking 后代码大小的示例库
template-explorer: 用于检查模板编译后的输出, 主要用于开发调试
vue: Vue3 主入口文件,包括运行时和编译器

3.2. 最重要源码模块

通过目录名称我们可以看到package中最重要的模块有5个, 分别为

compiler-core
compiler-dom
runtime-core
runtime-dome
reactivity

模块结构如下:

                      +---------------------+    +----------------------+
                      |                     |    |                      |
        +------------>|  @vue/compiler-dom  +--->|  @vue/compiler-core  |
        |             |                     |    |                      |
   +----+----+        +---------------------+    +----------------------+
   |         |
   |   vue   |
   |         |
   +----+----+        +---------------------+    +----------------------+    +-------------------+
        |             |                     |    |                      |    |                   |
        +------------>|  @vue/runtime-dom   +--->|  @vue/runtime-core   +--->|  @vue/reactivity  |
                      |                     |    |                      |    |                   |
                      +---------------------+    +----------------------+    +-------------------+

这5个大模块则是vue 最为重要的三大核心,

4. vue3 源码三大核心系统

4.1. 源码的三大核心系统

vue的源码包含三大核心系统

Reactivity模块: 响应式系统, 主要职责是监听响应式数据
Runtime模块: 也可以称之为Render模块, 真正负责渲染的模块, 主要职责就是将虚拟节点渲染成真实的元素,然后显示在浏览器上,
Compiler模块: 编译模块系统, 主要职责就是将template模板解析,生成render渲染函数.

而三大系统中渲染系统 + 响应式系统 就是我们在官网上看到的运行时runtime

runtime运行时加上 compile编译器就构成了完整版的Vue代码

三大系统对应的源码目录

4.2. 三大核心系统的协同工作

5. 编译调试

5.1. 打包源码

根据package.json文件中的脚本命令

这里这么多命令, 我们开始只需要了解两个dev和build

dev: 实施编译, 当你修改vue源码时, 会实时打包
build: 将vue源码打包存放在dist目录下

这两个打包都是通过node运行scripts目录下对应的打包文件进行打包, 有兴趣的可以去详细分析一下vue 打包脚本

通过pnpm运行打包命令

pnpm run build

打包完成以后在packages/vue目录下生成dist目录, 目录中针对不同的模块化打包成不同的文件

此时我们就可以编写测试文件

5.2. 编写测试文件

在packages/vue/example目录为vue提供了很多示例页面, 每个页面都引入Vue构建后的文件./packages/vue/dist/vue.global.js

我们可以在此目录下编写的测试页面:package/vue/example/hello.html

实例代码

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    
    <!-- 引入打包后的文件 -->
    <script src="../dist/vue.global.js"></script>
  </head>
  <body>
    <!-- vue 挂载节点 -->
    <div id="app">
      <div>{{name}}</div>
    </div>
    <script>
      // 解构需要使用的API
      const { reactive, createApp, ref } = Vue

      // 创建vue 应用
      createApp({
        setup() {
          // 通过ref 生成响应式数据
          const name = ref('张三')

          // 两秒后修改响应式数据
          setTimeout(() => {
            name.value = '李四'
          }, 2000)
          return { name }
        }
      }).mount('#app')
    </script>
  </body>
</html>

5.3. 调试Vue源码

在浏览器中运行测试文件, F12打开开发工具, 在源代码栏找到测试文件打上断点

此时刷新页面, 浏览器就会在断点位置停止运行, 我们可以手动点击下一步进入源码调试了

进入vue源码后,就可以看到refAPI, 接收一个字符串参数"张三", 并返回调用createRef(value,false)结果

6. 总结

至此我们已经完成了源码分析的第一步,在此过程中:

首先我们在github拉取vue源码
其次我们简单了解了vue源码目录结构
最后我们通过源码编写测试实例, 断点测试时,成功进入源码API

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^