初学者也能看懂的 Vue3 源码中那些实用的基础工具函数

 

1. 前言

本文通过学习Vue3源码中的工具函数模块的源码，学习源码为自己所用。

歌德曾说：读一本好书，就是在和高尚的人谈话。同理可得：读源码，也算是和作者的一种学习交流的方式。

阅读本文，你将学到：

• 如何学习 JavaScript 基础知识，会推荐很多学习资料
• 如何学习调试 vue 3 源码
• 如何学习源码中优秀代码和思想，投入到自己的项目中
• Vue 3 源码 shared 模块中的几十个实用工具函数
• 我的一些经验分享

shared模块中57个工具函数，本次阅读其中的30余个。

2. 环境准备

2.1 读开源项目 贡献指南

打开 vue-next，开源项目一般都能在 README.md 或者 .github/contributing.md 找到贡献指南。

而贡献指南写了很多关于参与项目开发的信息。比如怎么跑起来，项目目录结构是怎样的。怎么投入开发，需要哪些知识储备等。

我们可以在项目目录结构描述中，找到shared模块。

shared: Internal utilities shared across multiple packages (especially environment-agnostic utils used by both runtime and compiler packages).

README.md 和 contributing.md 一般都是英文的。可能会难倒一部分人。其实看不懂，完全可以可以借助划词翻译，整页翻译和百度翻译等翻译工具。再把英文加入后续学习计划。

本文就是讲shared模块，对应的文件路径是：vue-next/packages/shared/src/index.ts

也可以用github1s访问，速度更快，github1s packages/shared/src/index.ts

2.2 按照项目指南 打包构建代码

为了降低文章难度，我按照贡献指南中方法打包把ts转成了js。如果你需要打包，也可以参考下文打包构建。

你需要确保 Node.js 版本是 10+, 而且 yarn 的版本是 1.x Yarn 1.x。

你安装的 Node.js 版本很可能是低于 10。最简单的办法就是去官网重新安装。也可以使用 nvm等管理Node.js版本。

node -v
# v14.16.0
# 全局安装 yarn
# 克隆项目
git clone https://github.com/vuejs/vue-next.git
cd vue-next

# 或者克隆我的项目
git clone https://github.com/lxchuan12/vue-next-analysis.git
cd vue-next-analysis

npm install --global yarn
yarn # install the dependencies of the project
# yarn —ignore-scripts 忽略一些安装，更快速
yarn build

可以得到 vue-next/packages/shared/dist/shared.esm-bundler.js，文件也就是纯js文件。也接下就是解释其中的一些方法。

当然，前面可能比较啰嗦。我可以直接讲 3. 工具函数。但通过我上文的介绍，即使是初学者，都能看懂一些开源项目源码，也许就会有一定的成就感。 另外，面试问到被类似的问题或者笔试题时，你说看Vue3源码学到的，面试官绝对对你刮目相看。

2.3 如何生成 sourcemap 调试 vue-next 源码

熟悉我的读者知道，我是经常强调生成sourcemap调试看源码，所以顺便提一下如何配置生成sourcemap，如何调试。这部分可以简单略过，动手操作时再仔细看。

其实贡献指南里描述了。

Build with Source Maps Use the --sourcemap or -s flag to build with source maps. Note this will make the build much slower.

所以在 vue-next/package.json 追加 "dev:sourcemap": "node scripts/dev.js --sourcemap"，yarn dev:sourcemap执行，即可生成sourcemap，或者直接 build。

// package.json
{
    "version": "3.2.1",
    "scripts": {
        "dev:sourcemap": "node scripts/dev.js --sourcemap"
    }
}

会在控制台输出类似vue-next/packages/vue/src/index.ts → packages/vue/dist/vue.global.js的信息。

其中packages/vue/dist/vue.global.js.map 就是sourcemap文件了。

我们在 Vue3官网找个例子，在 vue-next/examples/index.html。其内容引入packages/vue/dist/vue.global.js。

// vue-next/examples/index.html
<script src="../../packages/vue/dist/vue.global.js"></script>
<script>
    const Counter = {
        data() {
            return {
                counter: 0
            }
        }
    }

    Vue.createApp(Counter).mount('#counter')
</script>

然后我们新建一个终端窗口，yarn serve，在浏览器中打开http://localhost:5000/examples/，如下图所示，按F11等进入函数，就可以愉快的调试源码了。

3. 工具函数

本文主要按照源码 vue-next/packages/shared/src/index.ts 的顺序来写。也省去了一些从外部导入的方法。

我们也可以通过ts文件，查看使用函数的位置。同时在VSCode运行调试JS代码，我们比较推荐韩老师写的code runner插件。

3.1 babelParserDefaultPlugins babel 解析默认插件

/**
 * List of @babel/parser plugins that are used for template expression
 * transforms and SFC script transforms. By default we enable proposals slated
 * for