《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代码。

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

好的，请看下集！