乐趣区

杂谈-Vue30-PreAlpha-源码导读

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/ 的文件夹。

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 ----------------------------------- 不解释

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

退出移动版