Vue 3 都 RC 了，前端的你还不来看看

7月18号，Vue.js 作者尤雨溪宣布 Vue 3 已进入 RC 阶段，这意味着 Vue 3 内核的 API 和实现已到达稳定状态。

Vue 可称得上是前端框架界的 C 位，学前端必学 Vue！

无论你是小白，还是已有多年经验的前端，这门讲解 Vue 3 的课程——《Vue.js 3 基础入门实战》，都一定要来学习呀！

Vue 3 介绍与安装

实验介绍

本节实验是本课程的第一个实验，主要带领大家了解一下 Vue 3 beta 版对比 Vue 2.x 的重要变更，同时将为大家讲解三种安装 Vue 3 的方式。

知识点

• Vue 3.0 对比 2.x 的重要变更
• Vue 3.0 beta 版安装

Vue.js 介绍

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。<信息来源：vue 官网>

Vue 是一个推陈出新的前端框架，吸收了很多前端框架的优点。例如，Vue 借鉴了 React 的组件化和虚拟 DOM ，借鉴了 Angular 的模块化和数据绑定。因此，我们以 Vue.js 作为入手，以后深入学习其他框架，你会发现他们的共通之处，更好地高效地学习。

选择 Vue.js 的更多原因是，就框架的 API 而言，对比之下，Vue 更加轻便简洁。Vue 自身拥有开箱即用的生态开发包（Vuex,Vue-Router）等，复杂性低、学习成本低，是一门比较好入门的前端框架。

3.0 对比 2.x 的重要变更

4 月 16 号，尤雨溪大大发布了 Vue.js 3 beta 版，State of Vue 是他上传到 google docs 上的 slides，如果你可以有 科学 上网的条件的话你可以打开链接，如果不行，下面我们会为大家简单总结一下主要内容。

进入 Beta 阶段意味着所有被列入计划的 RFCs 已经实现了，接下来的重点是让 Vue 3 变得更加稳定，以及让 vue 相关的第三方库支持 vue 3。

Vue 3.0 相对与之前的版本，有 6 个方面的重要变更：

• Performance （性能）
• Tree-shaking support （支持 Tree-shaking）
• Composition API
• Fragment, Teleport, Suspense
• Better TypeScript support （更好的 TypeScript 支持度）
• Custom Renderer API （自定义的 Renderer API）

下面我们将具体的为大家讲解一下这 6 个方面。

Performance

性能上，主要有以下这五个方面：

• Rewritten virtual dom implementation （重写了虚拟 DOM）
• Compiler-informed fast paths （优化编译）
• More efficient component initialization （更高效的组件初始化）
• 1.3-2x better update performance （1.3~2 倍的更新性能）
• 2-3x faster SSR （2~3 倍的 SSR 速度）

性能上，主要是优化了虚拟 DOM，所以也就有了更加优化的编译，同时实现了更加高效的组件初始化。

Tree-shaking support

• Most optional features (e.g. v-model, ) are now tree-shakable （大多数可选功能（如 v-model、）现在都是支持 Tree-shaking 的。）
• Bare-bone HelloWorld size: 13.5kb. 11.75kb with only Composition API support
• All runtime features included: 22.5kb. More features but still lighter than Vue 2

在大部分情况下，我们并不需要 vue 中的所有功能，但是在之前的 vue 版本中，我们没有一个合适的办法用来除去不需要的功能，而 Vue3 中，为了满足体积更小的需求，支持 Tree-shaking，也就意味着我们可以按需求引用的内置的指令和方法。

Composition API

• Usable alongside existing Options API （可与现有选项 API 一起使用）
• Flexible logic composition and reuse （灵活的逻辑组成和重用）
• Reactivity module can be used as a standalone library （Reactivity 模块可以作为独立的库使用）

Composition API 主要是提高了代码逻辑的可复用性，并且将 Reactivity 模块独立出来，这也使得 vue 3 变得更加灵活地与其他框架组合使用。

Fragment, Teleport, Suspense

• Fragment
  • No longer limited to a single root node in templates （