杂谈: Vue3.0 Pre-Alpha 源码导读

5号凌晨，尤雨溪公布了Vue3源代码。

源码地址：https://github.com/vuejs/vue-next

vue-next，顾名思义，下一个Vue。它的status是Pre-Alpha，解释一下，产品发布周期的一个版本，一般是在alpha之前发布。也有人叫Development Release、Technical Preview（技术预览版）等。

功能非常不完善，有时候会有较严重的BUG出现，因为它是整个软件发布周期中的第一个阶段，所以它的名称是"Pre-Alpha"，希腊字母中的第一个字母alpha前面加上Pre表示alpha之前。

也就是说这次公布的是预览版，正式版可能要等到明年，才能与大家见面。

话不多说接下来我们谈谈变化部分

Typescript

Vue3.0使用 TypeScript 重构，如果你还在犹豫是否去了解 TypeScript，这就是你最好的理由，相信我你会爱上他。

Proxy

Vue2.x 中，实现数据的可响应，需要对 Object 和 Array 两种类型采用不同的处理方式。 Object 类型通过 Object.defineProperty 将属性转换成 getter/setter ，这个过程需要递归侦测所有的对象 key，来实现深度的侦测。

观测 Array 对象的变化，需要对 Array 原型上几个改变数组自身的内容的方法做了拦截，这种模式一般称为代理原型。（原理不再此做过多的阐述

Vue3.0实现方式是通过 ES6 提供的 Proxy API，相比旧的 defineProperty API ，Proxy 可以代理数组&对象。

reactivity

Vue3 项目结构采用了 lerna 做 monorepo 风格的代码管理，稍微介绍下什么是monorepo。

之前项目迭代更新的时候，通常的做法是把一个大的codebase拆成一些独立的package或是module，再将这些功能独立的package分别放入单独的repository中进行维护。可以简单地称这种方式为multiple repositories。

而monorepo则是一种相反的做法，它提倡将所有的相关package都放入一个repository来管理。

这样比较显著的特征是项目中会有个 packages/ 的文件夹。

image.png

Vue2.x的版本响应系统，数据观测的核心代码都放在了** observer**中。

Vue3.0 reactive.ts文件，它提供了reactive函数，该函数实现响应式数据观测。

packages 目录导读

├── compiler-core ------------------------------- 参照之前的Vue2.X entry-runtime.js 运行时构建的入口，不包含模板(template)到render函数的编译器
├── compiler-dom ---------------------------------- 参照之前的Vue2.X entry-runtime-with-compiler.js 独立构建版本
├── reactivity ------------------------------ 响应式系统 数据观测核心代码
├── runtime-core ---------------------------------- 与平台无关的运行时代码,Virtual-dom  Vue component相关代码
├── runtime-dom ------------------------------  针对浏览器的 runtime 相关代码
├── runtime-test ----------------------------------为了测试而写的轻量级 runtime
├── server-renderer ----------------------------------- SSR
├── shared ----------------------------------- 可忽略
├── vue ----------------------------------- 用于构建「完整构建」版本，引用了上面提到的 runtime 和 compiler
├── global.d.ts ----------------------------------- 不解释

更多的源码细节后续更新。