杂谈: 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 ----------------------------------- 不解释

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

阅读 1.6k

推荐阅读