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

最新推荐文章于 2024-05-11 09:42:52 发布

蓝桥云课

最新推荐文章于 2024-05-11 09:42:52 发布

阅读量286

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/shiyanlou_chenshi/article/details/107529504

版权

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, <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 这样的项目提供了很多便利。

标签引入模式，和平常引入 JQuery 一样，直接下载并用 <script> 标签引入，我们使用的是以下这个较为稳定的 CDN：

<!--vue版本为3.0.0-beta.14 -->
<script src="https://cdn.jsdelivr.net/npm/vue@3.0.0-beta.14/dist/vue.global.js"></script>

由于非会员用户无法访问外网，所以后续的代码中，统一使用引用链接为 <script src="https://labfile.oss.aliyuncs.com/courses/2495/vue.global.js"></script>

脚手架工具安装

那么应该如何搭建 Vue 3.0 项目呢，我们首先来了解第一种方式，第一种方式较为复杂，在环境中安装的时间也较长：

与 Vue 2.x 创建项目的过程类似，我们可以使用脚手架工具 vue-cli 来初始化项目，首先要安装脚手架工具：

npm install -g @vue/cli

安装的时间稍微有点长，在安装完成后（如上图），我们可以测试一下我们是否安装成功

vue -V

已经成功安装好后，我们来初始化项目

vue create vue-next-test

输入命令后，出现命令行交互窗口，交互窗口会出现较多选项，希望同学们耐心完成，第一个选项这里，我们选择 Manually select features：

随后我们勾选：Router、Vuex、CSS Pre-processors 和 Linter / Formatter，移动到选项后点击空格即可勾选，勾选完成后敲入回车进入下一步：

选择使用 history 路由模式，即输入 y：

接下来选择 css 预处理器，选择第一个即可 Sass/SCSS，下一步选择 eslint 配置：ESLint + Standard config

选择什么时候执行 eslint 校验，我们选择 Lint on save：

接下来是选择以什么样的形式配置以上所选的功能，选择第一个 In dedicated config files：

下面一个选项是是否将之前的设置保存为一个预设模板，我们输入 y：

接下来我们选择 NPM 来安装依赖

最后敲入回车，进入安装模式

已经完成了初始化，目前 Vue 3.0 项目需要从 Vue 2.0 项目升级而来，因为 vue-cli 还没有直接支持，我们通过插件升级的方式来实现，我们进入项目目录，并输入以下指令：

cd vue-next-test
vue add vue-next

执行完后，效果如下所示，项目会自动安装 vue-cli-plugin-vue-next 插件，该插件会完成操作：

在项目依赖中添加 Vue 3 beta 和 @vue/compiler-sfc
重新配置 webpack，用新的 Vue 3 编译器编译.vue 文件
自动迁移到 RFC-0009 中提到的一些全局 API 变化的模板。
自动将代码中的 Vue Router 和 Vuex 升级到 4.0 版本，但是如果未安装则不会升级
自动生成 Vue Router 和 Vuex 模板代码

我们打开配置文件（package.json）来看看安装的 Vue 版本：3.0.0-beta.1

项目现在正式升级为 Vue 3.0，但是为了适应实验楼的线上环境我们仍需要一些额外的配置，我们需要在文件的根目录下新建一个名为 vue.config.js 的文件，将文件中心写入如下代码：

module.exports = {
  devServer: {
    disableHostCheck: true,
  },
};

现在我们来运行一下吧，在 Terminal 中输入：

npm run serve

如图成功执行命令后，我们点击侧边工具栏中的 Web 服务按钮，就可以看到一个 vue 应用：

克隆仓库安装

同学们应该也感受到了，安装脚手架的过程显得有些太过复杂，与其直接安装 Vue 3，不如克隆一个项目vue-next-webpack-preview，这个项目为我们提供一个包括 Vue 3 在内的最小的 Webpack 设置，当我们创建较小项目时，可以采用这种方法。

克隆项目并安装 npm 模块：

git clone https://github.com/vuejs/vue-next-webpack-preview.git vue3-experiment
cd vue3-experiment
npm i

安装完成后的文件结构如下所示：

我们来看看这个项目中的 Vue 版本：3.0.0-beta.15

与第一种方法相似，为了适应实验楼的线上环境我们仍需要一些额外的配置，打开文件下的 webpack.config.js 文件，在 devServer{} 下添加:

devServer: {
    ...
    host:'0.0.0.0',
    disableHostCheck: true,
}

接下来我们输入以下命令来在环境中运行项目：

npm run dev
```![](https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8yMjY2NjItOTBmNTI0Y2ZkMWY4ZGIxMi5wbmc?x-oss-process=image/format,png)
运行成功后，打开侧边工具栏中的 Web 服务，效果如下所示
![](https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8yMjY2NjItZTc0YTZlNzE2NTM2ZjczNy5wbmc?x-oss-process=image/format,png)
我们可以看到目前这个项目已经实现了一个计算的功能，那么应该如何从头开始创建项目呢，很简单，我们只需要把 `src/*` 下的文件删除，并且重新编写 `main.js` 即可从头开始创建项目。

## **实验总结**

本节实验我们主要为大家讲解了 Vue 3.0 进入 Beta 版后所作出的 6 个方面的重要变更，并且介绍了 3 种不同的方式安装 Vue 3，我们来简单的回顾一下：

- Vue 3 相对与之前的版本，有 Performance （性能）、Tree-shaking support （Tree-shaking 支持）、Composition API、Fragment, Teleport, Suspense、Better TypeScript support （更好的 TypeScript 支持度）以及 Custom Renderer API （自定义的 Renderer API）6 个方面的重要变更

- 安装 Vue 3 有`<script>` 标签引入、利用脚手架工具搭建、克隆已有项目三种方式。