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, <transition>) are now tree-shakable （大多数可选功能（如 v-model、<transition>）现在都是支持 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 （<template> 中不再局限于单一的根节点）
- Manual render functions can simply return Arrays （render 函数可以返回数组）
- “Just works”
Teleport
- Previously known as <Portal>（原名为 <Portal>）
- More details to be shared by @Linusborg
Suspense
- Wait on nested async dependencies in a nested tree
- Works with async setup() （与 async 函数 setup() 配合使用）
- Works with Async Components （与 Async 组件配合使用）

Better TypeScript support

Codebase written in TS w/ auto-generated type definitions
API is the same in JS and TS
In fact, code will also be largely the same
TSX support
Class component is still supported (vue-class-component@next is currently in alpha)

vue3.0 对 TS 的支持度更高了，同时也支持 TSX 的使用；API 在 JS 与 TS 中的使用相同；类组件仍然可用，但是需要我们引入 vue-class-component@next，该模块目前还处于 alpha 测试阶段。

Custom Renderer API

NativeScript Vue integration underway by @rigor789
Users already experimenting w/ WebGL custom renderer that can be used alongside a normal Vue application (Vugel)

自定义 render。我们会提供一个 API 用来创建自定义的 render，因此你不需要为了自定义一些功能而 fork Vue 的代码。这个特性给 Weex 和 NativeScript Vue 这样的项目提供了很多便利。

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