自从Vue—next2020年9月18日发布的vue3.0版本，发展至今，现在主流的组件库基本都已经发布了支持vue3.0的版本，其他的生态也在不断的完善中，这两年随着Vue3的不断发展俨然已经成为了国内最火的前端框架之一，那Vue3相比较之前的其他版本的都有了什么新变化，添了什么新功能呢？这里做一个简单的总结，当然也有部分文档的传送门。

Vue3都有哪些显著的新功能

Vue3中值得关注的一些新功能包括：

第一，Composition API FAQ | Vue.js 组合式API，中文叫组合式API。

第二，SFC Composition API 语法糖（https://vuejs.org/api/sfc-script-setup.html） <script setup>。

第三，Teleport。

第四，Fragments。

第五，Emits Component Option（https://vuejs.org/api/options-state.html#emits）。

第六，应用 @vue/runtime-core （https://vuejs.org/api/custom-renderer.html） 的 createRenderer API来创建自定义的渲染器。

第七，SFC 现在可以包括全局规则或只针对插槽内容的规则（https://github.com/vuejs/rfcs/blob/master/active-rfcs/0023-scoped-styles-changes.md）。

第八，Suspense(https://vuejs.org/guide/built-ins/suspense.html)，目前还是实验性的。

其中，第一、第二、第五、第六在 Vue2.7 中也获得了全部或部分支持。

Vue3有哪些新的框架级建议呢？

Vue 3的支持库已经进行了重大更新。比如：

• 新版本的 Router、Devtools 和测试工具，支持Vue 3
• 构建工具链: 由 Vue CLI 升级为 Vite（https://vitejs.dev/）
• 状态管理: 由 Vuex 升级为 Pinia（https://pinia.vuejs.org/）
• IDE支持: 由 Vetur 升级为 Volar（https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar）
• 新的命令行TypeScript支持: vue-tsc（https://github.com/johnsoncodehk/volar/tree/master/packages/vue-tsc）
• SSG: 由 VuePress 升级为 VitePress（https://vitepress.vuejs.org/）
• JSX: 由@vue/babel-preset-jsx 升级为 @vue/babel-plugin-jsx

Vue3 全局API有哪些颠覆性的变化？

Vue3相较Vue2，有很多颠覆性的变化，升级的时候一定要注意的，就全局API 而言，有：

• 全局的Vue API被改变为使用一个应用实例（https://v3-migration.vuejs.org/breaking-changes/global-api.html）
• 全局和内部API已被重组为树状结构（https://v3-migration.vuejs.org/breaking-changes/global-api-treeshaking.html）

Vue3 模板指令有哪些颠覆性变化？

Vue3在模板指令上有很多颠覆性变化，升级时要留意，比如：

• 组件上的 v-model用法已被重新设计，取代了 v-bind.sync（https://v3-migration.vuejs.org/breaking-changes/v-model.html）
• 改变了在同一元素上使用 v-if 和 v-for 时的优先级有所改变（https://v3-migration.vuejs.org/breaking-changes/v-if-v-for.html）
• v-bind="object" 现在是顺序敏感的
• v-on:event.native 修饰符已被移除

Vue3 组件有哪些颠覆性变化？

Vue3在组件上有很多颠覆性变化，升级时要留意，比如：

• 函数式组件只能使用普通函数来创建（https://v3-migration.vuejs.org/breaking-changes/functional-components.html）
• 单文件组件（SFC）
• 异步组件现在需要 defineAsyncComponent 方法来创建（https://v3-migration.vuejs.org/breaking-changes/async-components.html）
• 组件事件现在应该用 emits 选项来声明（https://v3-migration.vuejs.org/breaking-changes/emits-option）

Vue3 渲染函数有哪些颠覆性变化？

Vue3在渲染函数上有很多颠覆性变化，升级时要留意，比如：

• 渲染函数的API已经发生改变（https://v3-migration.vuejs.org/breaking-changes/render-function-api.html）
• 删除了$scopedSlots属性，所有 slot 都通过 $slots作为函数暴露出来（https://v3-migration.vuejs.org/breaking-changes/slots-unification.html）
• $listeners 已被移除，合并到了 $attrs中
• $attrs现在包含 class 和 style 属性

Vue3 自定义元素有哪些颠覆性变化？

Vue3在自定义元素有很多颠覆性变化，升级时要留意，比如：

• 自定义元素检查，现在在模板编译期间执行（https://v3-migration.vuejs.org/breaking-changes/custom-elements-interop.html）
• is 属性仅仅用在组件上（https://v3-migration.vuejs.org/breaking-changes/custom-elements-interop.html#customized-built-in-elements）

Vue3 还有啥颠覆性的小变化？

Vue3还有很多颠覆性的小变化，升级时要留意，比如：

• destroyed生命周期选项已被更名为unmounted
• beforeDestroy 生命周期选项被改名为 beforeUnmount
• default 工厂函数的 props 属性不再具有访问 this 上下文的权限（https://v3-migration.vuejs.org/breaking-changes/props-default-this.html）
• 修改了自定义指令API，与组件生命周期保持一致，并删除了 binding.expression（https://v3-migration.vuejs.org/breaking-changes/custom-directives.html）
• data 应始终被声明为一个函数（https://v3-migration.vuejs.org/breaking-changes/data-option.html）
• 来自 mixins 的 data 选项现在被浅层的合并了（https://v3-migration.vuejs.org/breaking-changes/data-option.html#mixin-merge-behavior-change）
• 属性的一些强制值策略改变了（https://v3-migration.vuejs.org/breaking-changes/attribute-coercion.html）
• 一些 transition classes 改名了（https://v3-migration.vuejs.org/breaking-changes/transition.html）
• 现在默认不显示包裹元素了（https://v3-migration.vuejs.org/breaking-changes/transition-group.html）
• 当观察一个数组时, 回调将只在数组被替换时触发。如果你需要再突变时触发，必须制定 deep选项（https://v3-migration.vuejs.org/breaking-changes/watch.html）
• 没有特殊指令的<template> 标签，这些标签如 (v-if/else-if/else, v-for, or v-slot) ，现在被视为普通元素。这将导致原始的 <template> 元素被渲染出来。
• app根元素在渲染时不会被替换掉了（https://v3-migration.vuejs.org/breaking-changes/mount-changes.html）
• 生命周期 hook:事件前缀被更换为 vnode-（https://v3-migration.vuejs.org/breaking-changes/vnode-lifecycle-events.html）

现在关于Vue3 的新功能，大颠覆，小变化现在你都了解了么？