Vue3.0来了，来看看有哪些改变

2020年10月，Vue 3.0终于发布了第一个beta版本，这个大版本更新相较于2.0的推出已经过去两三年了，在前端开发这个快速迭代的大环境下，这么长时间才更新一个大版本挺少见的。但是我得说，虽然三年没有更新大版本，但尤雨溪这三年可真没闲着，三年不开张，一开张就来了个大招。Vue3.0是一套组合拳，它带来的变化全面而繁杂。接下来的2021年，使用Vue2.0的小伙伴们又有新东西要学习了。

那么今天我们就来梳理一下，看看Vue3.0到底有哪些值得关注的改变。

一、Vue生态环境变化。

我们先从Vue的整个生态说起，除了Vue核心库，Vue周边配套也全都来了个大升级，VueRouter，Vuex都升级到了4.0，构建工具也有更新，尤大大自己开发了一个专门的构建工具，叫Vite。这个构建工具尤其值得一说，我认为它弄不好会是webpack的终结者。我们来看看作者的介绍：“Vite，一个基于浏览器原生 ES imports 的开发服务器。利用浏览器去解析 imports，在服务器端按需编译返回，完全跳过了打包这个概念，服务器随起随用。同时不仅有 Vue 文件支持，还搞定了热更新，而且热更新的速度不会随着模块增多而变慢。针对生产环境则可以把同一份代码用 rollup 打包。虽然现在还比较粗糙，但这个方向我觉得是有潜力的，做得好可以彻底解决改一行代码等半天热更新的问题。”

设计目标。

说完生态，我们还是回到Vue核心库，我们最关心的，其实还是这个。先来看下 ** Vue3.0 的6个设计目标：**

1. 更小：全局 API 和内置组件 / 功能支持 tree-shaking； 常驻的代码尺寸控制在 10kb gzipped 上下。

2. 更快：基于 Proxy 的变动侦测，性能整体优于 getter / setter；Virtual DOM 重构；编译器架构重构，更多的编译时优化。

3. 加强 API 设计一致性：3.0的api会更符合人的习惯，更友好

4. 加强 TypeScript 支持：3.0 本身用 TypeScript 重写，内置 typing；支持TSX；但是不会影响不使用Typescript的用户。另外还有一件很重要的事情，Class API提案已经撤销了，使用TS开发Vue的小伙伴要注意下了。

5. 提高自身可维护性

6. 开放更多底层功能

总体的设计目标简单说就是更小更快更友好。。。

二、API变化。

Vue3.0的API变化，总的来说有以下几个需要注意的特点：

• 技能升级曲线平滑。掌握Vue 2的人应该可以很顺利的使用Vue 3

• 不能直接把项目从Vue 2升级到Vue 3，因为很多API细节有破坏性修改

• Vue2的组件库不能直接给Vue3使用

• 浏览器兼容方面，只兼容到IE11+。呃，这样也好，希望能对IE退出历史舞台再出一份力。

• 模板语法的 99% 将保持不变。

• 现有的Options API没有大的变化。

下面我们看下API变化的几个主要方面（API变化很繁杂，此处我们仅列举较常用的API变化）：

全局 API 的变化：

Vue 2.x 有许多全局 API 和配置，这些 API 和配置可以全局改变 Vue 的行为。例如，要创建全局组件，可以使用 Vue.component 这样的 API。虽然这种声明方式很方便，但它也会导致一些问题。从技术上讲，Vue 2 没有“app”的概念，我们定义的应用只是通过 new Vue() 创建的根 Vue 实例。从同一个 Vue 构造函数创建的每个根实例 共享相同的全局配置，因此它不利于测试，也不利于在全局多个app之间共享Vue副本。调用 createApp 返回一个应用实例，这是 Vue 3 中的新概念

import {
    createApp } from 'vue' 

const app = createApp({
   })
1
2
3
4
5

任何全局改变 Vue 行为的 API 现在都会移动到

应用实例上，以下是当前全局 API 及其相应实例 API 的表：

模板语法变化

• Vue 3 中，组件现在正式支持多根节点组件

• v-if 与 v-for 的优先级对比，两者作用于同一个元素上时， v-if 会拥有比 v-for 更高的优先级

• 过滤器。过滤器已删除，不再支持。建议用方法调用或计算属性替换它们

• 按键修饰符，不再支持使用数字 (即键码) 作为 v-on 修饰符，不再支持 config.keyCodes

新增的两个内置组件 Teleport 和 Suspense

Teleport（传入）Teleport 提供了一种干净的方法，允许我们控制在 DOM 中哪个父节点下呈现 HTML，而不必求助于全局状态或将其拆分为两个组件，从此后某个组件创建的Html将可能不在本组件内。想像一下，你要写一个弹窗组件，而你希望这个弹窗组件的html放在body下，那可以使用Teleport方便地实现它

<template>
  <button @click=&
1