Vue3 深度解析

前言

距离尤雨溪首次公开 Vue3 (vue-next)源码有一个多月了。青笔观察到，刚发布国庆期间，出现不少解读 Vue3 源码的文章。当然不少有追风蹭热之嫌，文章草草讲讲响应式原理，或者只是做了一些上层的导读，告诉读者应该先看哪再看哪。不能说这些文章就没有一点价值，它确实能够让你在短时间内，不用过多思考就能了解到一些 Vue3 重中之重的“干货”。但是过于干货的未必就是好的。因为干货通常是经过作者咀嚼过后的产物，大部分营养其实只被作者消化了。留给读者的只是一些看似很有料，实则没有营养的残渣。就像一块啃到只剩骨头的排骨。这样的文章通常适合于媒体传播，仅用于快速捕获眼球。但是对于想更细致了解 Vue3 的专业前端开发，这显然远远不够。

事实上，这不是青笔第一篇关于 Vue3 的文章。在 Vue3 公布后的第五天，也就是10月10号。青笔没有直接解读源码，而是从一个想要自己开发或参与 Vue3 项目的角度，讲到了构建 Vue3 所用到的构建工具和相关技术。文章不仅仅是给出最后的“干货”，而是把青笔在实践过程中的用到的方式方法，包括得到结果的每一行shell命令，git 技巧等。读者完全可以按照文章的脉络得到和青笔一样的结果。这样做是青笔自身多年软件开发经验，所坚持的一个观点，那就是**“技术不是用来看的，而是用来实操的”**。只有当你能亲自实践才能真正理解其中的内涵，并且这也是最简单和行之有效的学习方式。那些读起来晦涩难懂，繁杂抽象的概念术语，其实最怕的就是被实操，因为一旦遇到一个身怀实操大法的读者，它的所有“江湖禁术”将被见招拆招，一一破解。

但是想要少走弯路，高效率地实践，前提是有一批相关的文章。

从零开始构建 vue3

本文依然坚持这样的一个准则，带你从实践角度来探秘 Vue3 的源码。你也可以理解为“授之以鱼不如授之以渔”。

1. 准备工作

为了顺利完成后面的实践。请先确保你的电脑已经安装了以下工具。

1. git
2. node 10 及以上版本 (LTS版)
3. yarn
4. lerna
5. typescript

其中 lerna 和 typescript 使用 npm 进行全局安装。安装方式如下：

npm install -g lerna
npm install -g typescript

2. 先人一步 体验 Vue3 搭建下一代网页应用

2.1 Composition API

事实上早在 Vue3 源码公布之前，Vue 官方已经透露了代表下一代 Vue 技术的 Vue3 将采取的新的接口使用方式。这种新的方式叫做 Composition API （组合式 API）。而与之相对应的经典 API 也是我们所熟知的 Vue 使用方式叫做 Options API（选项式 API）或 Options-based API（基于选项的 API）。

在经典的 Options API 中，我们使用一个具有 data, methods 等“选项”的 JS 对象来定义一个页面或者组件。这种简单直接的方式，在应用早期阶段，代码和业务逻辑较简单时，非常的友好亲民，这也是 Vue 以学习门槛较低而广受开发者亲昵的的一个因素。但是，有过开发大型 Vue 应用的开发者应该心有体会。当页面的逻辑越来越多时，我们的组件将变得冗长复杂。很多本可以复用的逻辑和代码，你很难有一种使用起来非常舒适的方式来复用。亲笔自身实践，在 Vue2 中，组件逻辑和代码复用最常用的方式是混入 mixin ，这虽然是一种可行的方式，但是这种方式显然从出生和 Vue 框架紧密耦合。当你想要将一个框架无区别的普通 JS 函数或者对象复用到 Vue2 开发的组件中时，你发现一切都是那么的不优雅。

基于满足在开发大型 Vue 应用中更优雅地复用已有代码的需求催生下，Vue3 Composition API 似乎是顺势而为，并且势在必得。

vue-composition-api-rfc

2.2 第一个 Composition API 应用

据官方介绍，Vue3 正式发布将在明年第一季度。但这并不影响我们提前使用 Composition API 开发一个简单的响应式 WEB 应用。

并且作为解读 Vue3 源码的前戏，我们将直接在最新源码上进行实操（你很快就会发现这样做的好处）。

2.2.1 克隆源码与初始化

为了精简篇幅，这里直接整个给出所有命令。想了解更多细节，推荐青笔另一篇专栏文章 《从零开始构建 vue3》 ，里面有对相关细节的详细讲解。

# 克隆源码
git clone https://github.com/vuejs/vue-next.git
# 进入源码目录
cd vue-next
# 安装依赖
yarn
# 初次构建
yarn build
# 建立项目内部 packages 软链
lerna bootstrap

这里需要特别讲到的是最后一步 lerna bootstrap ，这里实际就是在项目根目录的 node_modules 创建了一个符号链接（或软链） vue 和一个 scope 目录@vue 。

在 macOS 或其他 linux 发行版上可以通过如下命令查看链接指向。

ls -l node_modules/ | grep vue
ls -l node_modules/@vue

可以看到 vue 和 @vue 下的符号链接分别指向了源码目录 packages/ 下对应的目录（文件夹）。

这样，我们就可以在 Vue3 正式发布到 npm 前，直接使用源码里的各个 package ，等效于使用从 npm 安装的其他依赖。并且，由于 Vue3 使用 Typescript 编写，里面已经安装和提供编写 Typescript 所有需要开发依赖和配置。因此，我们可以在源码项目里使用和 Vue3 源码一样的方式书写 Typescript 程序。不用担心，即使还不熟悉 Typescript 也不影响继续阅读本文。

2.2.2 编写第一个 Vue3 Composition API 网页

为了不污染了 Vue3 源码目录结构。我们可以创建一个新的分支。

git checkout -b examples

在根目录下创建 examples 目录，用于存放示例代码。

mkdir examples

新建文件 ./examples/composition.html，添加如下内容：