前言

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

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

1. 新建项目

在阅读源码的同时，会结合Vue 3的官方文档，对照API文档和指南中的概念和示例代码手动实践，可以帮助更好地理解源码中实现的背景和应用场景。

1.1 安装Vue CLI

如果你还没有安装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:

kklt-vue git commit -m 'Initial commit'
fatal: detected dubious ownership in repository at '/Users/xxx/Documents/xxx/kklt-vue'
To add an exception for this directory, call:

	git config --global --add safe.directory /Users/xxx/Documents/xxx/kklt-vue

这个错误消息是Git在较新版本中引入的安全特性的一部分，特别是从Git 2.35.2开始，Git增强了对仓库目录所有权和权限的检查，以防止潜在的不安全操作。当Git检测到当前仓库的所有权或权限配置可能与当前用户不匹配，或者存在安全隐患时，就会显示这个错误。为了解决这个问题，你可以按照错误消息中给出的建议，将该目录添加到Git的安全目录白名单中。这样做可以告诉Git，你信任这个仓库目录，它的所有权或权限设置是安全的。打开终端或命令行界面，运行以下命令(按错误消息中的建议，修改下面示例命令里的文件路径和项目名称为你自己的)：

git config --global --add safe.directory /Users/xxx/Documents/xxx/kklt-vue

遇到的报错2:

fatal: Unable to create '/Users/xxx/Documents/xxx/kklt-vue/.git/index.lock': Permission denied

遇到Permission denied错误时，通常意味着当前用户没有足够的权限来访问或修改指定的文件或目录。在这个场景中，Git尝试创建.git/index.lock文件时权限被拒绝，这可能是因为.git目录的所有权或权限设置不允许当前用户进行写操作。

#将kklt-vue目录及其所有子目录的所有权更改为当前用户（替换<your-username>为你的用户名）
sudo chown -R <your-username> /Users/xxx/Documents/xxx/kklt-vue
#然后，确保你（作为所有者）有足够的权限来读写这些目录：
chmod -R u+rw /Users/xxx/Documents/xxx/kklt-vue

清理现有的锁文件

rm /Users/xxx/Documents/xxx/kklt-vue/.git/index.lock

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

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

1.5 将本地仓库推送到GitHub

GitHub会为你的新仓库提供一些帮助信息，包括如何将现有的仓库推送到GitHub。按照GitHub页面上提供的命令，将本地仓库推送到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用户名和你创建的仓库名称。

GitHub在2021年8月13日移除了对密码认证的支持，这意味着你不能再使用用户名和密码的方式来进行命令行操作。这个变化是出于安全考虑，以推广更安全的认证方式，如个人访问令牌（Personal Access Token，简称PAT）和SSH密钥。

解决方案要解决这个问题，你可以使用下列两种方法之一进行认证：

使用个人访问令牌（PAT）生成PAT：登录你的GitHub账户，进入设置(Settings) > 开发者设置(Developer settings) > 个人访问令牌(Personal access tokens)，点击“生成新令牌(Generate new token)”。选择适当的权限（scopes），对于普通的仓库操作，你通常需要选择repo权限。然后生成令牌。使用PAT：在命令行操作需要认证时，使用你的GitHub用户名和刚才生成的PAT作为密码。

1.6 完成

至此，你已成功创建了一个Vue项目，并将其推送到了GitHub的公开仓库。你可以通过GitHub的URL访问并分享你的项目。这为后续的开发、学习和协作提供了便利。

如果你计划跟进Vue 3源码学习，现在你已经有了一个实验和实践的环境。接下来，你可以开始探索Vue 3的新特性，实践你所学的内容。

2. clone code

cd到准备放源码的目录：

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

3. Vue 3 源码学习

3.1 前置知识：

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

3.2 框架和源码的对照学习：

在阅读源码的同时，建议结合Vue 3的官方文档，对照API文档和指南中的概念和示例代码，可以帮助更好地理解源码中实现的背景和应用场景。

3.3 Vue 3 源码学习顺序

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

3.3.1 开始于概览：

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

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

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

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

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

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

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

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

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

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

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

3.3.7 其他

compiler-sfc：用于实现 .vue 文件的解析，以及 template、script、style 的解析的相关代码都是由 compiler-sfc 模块实现的。

3.3.8 scripts:

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

3.3.9 test:

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

Vue3源码学习: 准备工作

前言