本文已参与「新人创作礼」活动，一起开启掘金创作之路。

6Vue3探索篇

vue-next 源码：github.com/vuejs/vue-n…

Composition API：composition-api.vuejs.org/api.html

vue3 官网：v3.cn.vuejs.org

目录

一、两个源码库第一眼下的区别

正如vue3和vue2 源码库目录对比图所示，我们学习源码，第一眼看去就发现了两个版本，在源码库的设计上，有着醒目的明显区别，vue3并没有延续vue2的目录结构，从中我们可以得到的信息有：

1. 编程语言typescript

①编程语言的选择：TypeScript取代JavaScript

vue3在编程语言上选用了TypeScript，而vue2是javascript，为什么会有这样的变化。官网引用npm包中的官方说明：

随着应用的增长，静态类型系统可以帮助防止许多潜在的运行时错误，这就是为什么 Vue 3 是用 TypeScript 编写的。这意味着在 Vue 中使用 TypeScript 不需要任何其他工具——它具有一等公民支持。

②拓展：TypeScript与JavaScript的区别

这里引用一下美团郭凯老师在知乎上的一个回答：

TypeScript is a syntactic sugar for JavaScript. TypeScript syntax is a superset of ECMAScript 2015 (ES2015) syntax. Every JavaScript program is also a TypeScript program.

语言层面：JavaScript和TypeScript都是ECMAScript（ECMA-262）的具体实现。

执行环境层面：浏览器引擎和Node.js都能够直接运行JavaScript，但无法直接运行TypeScript。

时序层面：TypeScript被真正执行前，会通过编译转换生成JavaScript，之后才能被解释执行。

厂商层面：JavaScript由Netscape率先推出，现在主要由各大浏览器厂商实现。而TypeScript is >a trademark of Microsoft Corporation，目前由微软进行设计和维护。 TypeScript是ECMAScript 2015的语法超集，是JavaScript的语法糖。JavaScript程序可以直接>移植到TypeScript，TypeScript需要编译（语法转换）生成JavaScript才能被浏览器执行。

③个人观点：TypeScript会是趋势

从css预处理语言sass的角度看TypeScript的发展趋势，TypeScript很有可能会成为日常开发首选（在TypeScript和JavaScript之间），就好像web前端开发者，现在的日常开发主要是使用css预处理语言而不是原生的css。

css预处理语言sass于css，和TypeScript于JavaScript的相似之处：

a. css预处理语言和TypeScript的妙处，TypeScript是ECMAScript 2015的语法超集，是JavaScript的语法糖。而类似sass这样的css预处理语言也是css的语法超集，也同样有很多语法糖。

b. sass最终会被编译（转换）成css，TypeScript最终会被编译（语法转换）成JavaScript，才能在浏览器上执行。

c. 日常业务开发，css预处理语言已成为取代css的选项，但css预处理语言不会取代css，至少相当长一段时间不会。相信TypeScript之于JavaScript也会是这样的趋势。

顺带提一下，Angular很早就选用了TypeScript而非JavaScript。

2. 源码管理方式的转变：

vue3源码管理上，采用monorepo管理方式，和vue2相比，实现从模块管理到包管理的转变。

①什么是monorepo

web前端开发者熟悉的Babel代码仓库就是使用monorepo进行管理的。在Babel的GitHub仓库中的 README.md 中是这样描述的：

How is the repo structured? The Babel repo is managed as a [monorepo]>(github.com/babel/babel…) that is composed of many npm packages.

Monorepo 是管理项目代码的一个方式，指在一个项目仓库 (repo) 中管理多个模块/包 (package)。

②monorepo 的优缺点

优点：当分模块改为分包，各部分内容就降低了耦合性，给多人独立开发提供了便利；统一了工作流Code Sharing（这点实践不足，以后再谈）。

缺点：很明显的缺点是体积要变大，各包的依赖项可能会重复，也许有我未知的好方法。此外就是有一点门槛，需要一个团队的成员都熟悉monorepo管理方式，以及相关技巧，并且准守约定。

二、我关注到的vue1-vue3的系列变更

1.vue1到vue2的一些重大改变

①虚拟dom的引入

虚拟dom，虚拟节点的引入，除了提升了性能外，与html的解耦，为vue支持ssr提供了条件。

②根元素

vue2中，在模板中只允许一个根元素；而在vue1中是被允许多个的。没意外，vue3会回归允许多个根元素。（这个变化挺有意思的）

③生命周期

④其他细节

2. vue2到vue3的一些关注到的改变

①源码使用typescript编写，vue3对typescript的支持更友好。

②新增 hook api。

③变化观测机制，使用proxy替换Object.defineProperty。proxy在数据劫持上做的更好更全面，不仅可以劫持object数据，还可以劫持数组，且可以观测动态新增的属性。

④重写虚拟dom，优化插槽生成，静态树提升。

⑤其他，了解更多vue2版本的源码剖析：

01核心思想篇：note.youdao.com/s/363fiG3R

02变化侦测篇：note.youdao.com/s/aJFtug2F

03虚拟dom篇：note.youdao.com/s/sb5yDRO

04模板编译篇：note.youdao.com/s/WdWD5Nuj

05生命周期篇：note.youdao.com/s/McRiwMwq

vue2到vue3的变更，更详细的说明请阅读官网：v3.cn.vuejs.org/guide/migra…

3.vue3什么时候能用

2020年4 月 21 日，在由前端圈组织发起的 B 站直播中，尤大大最后表示，目前的 Vue 3.0 Beta 已经可以投入使用，但对稳定性要求高的项目，暂时不建议使用。他建议生产项目暂时不要上，新的、小的项目可以试水。

根据规律，每一个程序的大本版后面都会有n多个是解决bug的小版本，所以那啥。此外，还有一点值得一提，2.x还有会最有一个版本，即2.7。

2022年1月，vue3已经发布正式版本，更新到了 v3.2.26，生态也逐渐完善。

三、后续说明

后续也许大概可能也会像剖析vue2那样，分析每个核心包。

├─packages              # 放置核心代码的文件夹
│  ├─compiler-core            #  模板编译-核心相关
│  ├─compiler-dom            #  模板编译-浏览器dom渲染相关
│  ├─compiler-ssr              #  模板编译-服务端渲染相关
│  ├─reactivity                    #  响应式相关
│  ├─reactivity-transform    #  响应式相关
│  ├─runtime-core              #  运行时-核心相关
│  ├─runtime-dom              #  运行时-浏览器渲染dom相关
│  ├─runtime-test               #  运行时-测试相关
│  ├─server-renderer         #  服务端渲染相关
│  ├─sfc-playground          #
│  ├─shared                      #  公共共享部分
│  ├─size-check                #  代码量大小检测相关
│  ├─template-explorer     #
│  ├─vue                           #  包括运行时和编译时的完整版本
│  └─vue-compat              #