《Vue3.0抢先学》系列之:网友们都惊呆了!

今天开始,我想给大家讲点新东西。大家不用大喊学不动,请放松心情随意观看,我也讲不出什么很深奥难学的东西,本系列文章都会是些比较浅显易懂的家常内容。

话说前两天,Vue 3.0的源码终于出现在了Github的Vue官方项目仓库中(https://github.com/vuejs/vue-next/),当前版本处于Pre Alpha状态。终于见到了传说中基于TypeScript编写的新版Vue的代码了,热爱学习的我顿时一股学习热情喷涌而出呀,第一时间抄起命令行,Clone下了源代码:

git clone https://github.com/vuejs/vue-next.git

下载完代码,稍微观察了一下项目结构,发现这是一个组织成 monorepo 形式的工程(简单来说也就是把多个相关子项目放在同一个Git仓库中),使用的lerna这个工具进行管理。下面是源码中packages下面的各个子项目模块:

其中几个比较重要的模块,先作一下简要的介绍:

  • vue Vue项目的主入口模块

  • reactivity 非常重要的模块,实现Vue3.0的数据响应式功能的核心

  • compiler-core 模板核心语法编译器,包括对标签、属性、指令(如v-if、v-for、v-bind、v-model、v-on、v-once、v-slot等)模板语法的解析

  • compiler-dom Vue模板编译器,可编译模板中其他功能性指令(如v-clock、v-html、v-text等)。依赖compiler-core

  • runtime-core 实现虚拟DOM、组件定义、生命周期、指令定义、依赖注入、渲染等功能的核心模块

  • runtime-dom Vue浏览器DOM环境运行时,负责实现与浏览器环境运行所需的相关特性。依赖runtime-core

其中还有些模块尚未开发完成,比如做服务端渲染(SSR)的server-renderer模块。

初步了解了工程结构后,我还是花了不少的时间阅读了一些关键性的代码文件及单元测试,收获还是不小,也澄清了之前的一些疑问,大致如下:

1. Vue3.0是一个全新的框架?Vue2.x的程序迁移到Vue3.0会比较困难?

不可否认,如果说从框架的实现层面来说,Vue3.0确实是一个全新的框架,框架的代码实现全部采用了TypeScript来编写,并且引入了一种和之前完全不同写法的API:组合式API(Composition API)的接口函数,但是对于框架的使用者来说(使用Vue3.0开发自己应用的开发者),你以前的写法仍然工作,Vue3.0提供了向下兼容,使得老项目的迁移变得更容易。

2. Vue3.0的响应式是采用的Proxy么?

是的,新版框架的数据响应式核心组件不再使用Vue2.x时所采用的Object.defineProperty()方式来对数据变化进行跟踪和触发,而是采用了更高级的Proxy,据说拥有更好的性能,以及可以更好的支持对数组元素进行响应式处理,一扫Vue2.x在这方面的尴尬场面。不过,值得注意的是,绝大多数版本的IE浏览器是不支持Proxy的,如果需要进行兼容,我们可能需要引入相关polyfill。

3. 一定要用TypeScript来编写代码?

不是。框架构建后生成的是js文件,你还是可以像以前一样使用Vue,比如直接在HTML文件中通过<script>标签来引入vue.global.js文件;也可以在通过vue-cli生成的单页应用项目中通过引入模块的形式来导入(import)Vue框架;你可以根据你的喜好和具体使用场景,来合理选用js、jsx、ts、tsx进行代码的编写。

4. 可以写出像React风格的组件代码吗?

可以。通过采用jsx或tsx,结合使用render()函数和Composition API,我们完全可以写出很漂亮的函数式风格Vue代码。

不过,说了这么多,是不是你已经迫不及待的想知道到底怎么来快速用起这个源代码呢?

好的,请看下集

关注首发公众号:默碟

最新推荐阅读:
《Vue3.0抢先学》系列文章

推荐阅读更多精彩内容