【Vue3源码学习】— 准备工作

前言

进入Vue 3的世界，意味着踏上了探索现代JavaScript框架的精髓之旅。Vue 3不仅仅是一个版本迭代，它代表了Vue生态系统的一次飞跃，引入了许多创新的特性和改进，比如Composition API、响应式系统的重写，以及更好的TypeScript集成。为了深入理解这些概念，掌握Vue 3的内部机制，我决定从源码层面开始我的学习之旅。

学习源码是一个既挑战又充满奖赏的过程。它不仅是学习一个框架，同时也会对JavaScript进行更深入的学习，还需要对工程化和现代前端开发流程有所了解。为了使这段学习能不迷失于读代码的迷宫中和真实的坚持下去，我准备记录这个学习的过程，希望能为同样对Vue 3源码感兴趣的开发者提供一些参考和启发。

1. 新建项目

在阅读源码的同时，会结合Vue 3的官方文档，对照API文档和指南中的概念和示例代码手动实践，可以帮助更好地理解源码中实现的背景和应用场景。首先，新建一个vue项目作为实验和实践的环境。

1.1 安装Vue CLI

Vue CLI是一个基于命令行的工具，用于快速生成Vue项目。打开终端或命令提示符，运行以下命令：

npm install -g @vue/cli
# 或者使用yarn
yarn global add @vue/cli

1.2 创建Vue项目

使用Vue CLI创建一个新的Vue项目。打开终端或命令提示符，定位到准备创建项目的目录，然后运行以下命令：

vue create my-vue-project
#例如我的项目名是kklt-vue
vue create kklt-vue

1.3 初始化Git仓库

进入项目目录，初始化Git仓库：

cd my-vue-project
git init

添加所有项目文件到Git仓库，并提交第一次更改：

git add .
git commit -m "Initial commit"

1.4 在GitHub上创建新的公开仓库

登录GitHub账户。
点击右上角的"+“号，选择"New repository”。
填写仓库名称（建议与本地项目名称一致）。
选择"Public"以创建一个公开仓库。
点击"Create repository"。

1.5 将本地仓库推送到GitHub

添加远程仓库地址并推送：

git remote add origin https://github.com/your-username/my-vue-project.git
git branch -M main
git push -u origin main

请确保替换your-username和my-vue-project为你自己的GitHub用户名和你创建的仓库名称。

1.6 完成

至此，已成功创建了一个Vue项目，并将其推送到了GitHub的公开仓库。

2. 下载源码

定位到准备放源码的目录：

git clone https://github.com/vuejs/core.git

3. Vue 3 源码学习

前置知识：

在深入源码之前，确保对JavaScript（特别是ES6+）、TypeScript有充分理解，因为Vue 3源码大量使用了TypeScript和现代JavaScript特性。这有助于理解源码中的语法和编程模式。

学习顺序：

packages这是最重要的文件夹，包含了Vue 3的所有核心功能和模块。它分为多个子包，例如@vue/runtime-core、@vue/reactivity等。
Vue 3的源码主要分布在几个顶级文件夹中，每个文件夹有其特定的职责：

3.1 开始于概览：

首先了解Vue的整体架构和设计哲学。阅读官方文档中的介绍和博客文章可以帮助你建立起整体的框架。

3.2 深入响应式系统: @vue/reactivity

Vue的响应式系统是其最核心的特性之一，这部分是理解Vue 3如何追踪依赖和响应数据变化的基础，包含Vue的响应式系统的实现。重点关注reactive、ref、computed等API的实现。
在深入@vue/reactivity包之前，了解JavaScript的Proxy和ReflectAPI是有益的，因为Vue 3的响应式系统是基于这些现代JavaScript特性构建的。

3.3 探索核心运行时: @vue/runtime-core

包含了组件、渲染和虚拟DOM等的核心运行时逻辑。更深入地了解组件生命周期、插槽、自定义指令等Vue的核心特性。同时，理解虚拟DOM的工作原理及其与实际DOM的交互过程对于深入理解框架非常重要。

3.4 了解模板编译: @vue/compiler-core和@vue/compiler-dom

了解Vue模板的编译过程有助于理解Vue应用是如何从模板转化为可以运行的JavaScript代码的。这部分知识可以帮助开发者优化模板，更好地利用Vue的编译时优化特性。
compiler-core 包含Vue模板编译器的核心逻辑，理解Vue模板是如何被转编译成JavaScript渲染函数的。
compiler-dom，为浏览器环境提供特定的编译优化和模块。

3.5 研究平台特定代码: @vue/runtime-dom

针对浏览器的DOM操作封装。提供了与DOM相关的渲染器和指令，了解Vue是如何与浏览器DOM交互的。
这部分的学习不仅有助于理解Vue如何与浏览器DOM交互，也是理解Vue如何实现跨平台特性的关键

3.6 服务端渲染（SSR）: @vue/compiler-ssr,@vue/server-renderer

对于需要服务端渲染的应用，了解server-renderer和compiler-ssr的实现原理是非常有用的。这部分内容可以帮助开发者构建更高效、更可靠的SSR应用。
compiler-ssr： 在服务端编译时，会使用 compiler-ssr 提供的编译器。它是专门针对服务端渲染的转换插件。
server-renderer： 包含服务端渲染的核心实现，是用户在使用 Vue.js 实现服务端渲染时所需要依赖的包。

3.7 scripts:

包含构建脚本和配置文件，对了解Vue的构建过程有帮助。

3.8 test:

包含各种测试文件，可以帮助你理解Vue的功能是如何在各种场景下被测试的。