# Vue3 新特性 ## [Composition API](https://v3.vuejs.org/guide/composition-api-introduction.html#why-composition-api) > - Composition API does wonders for code organization by keeping code for individual features together. At the end of the day this means **a cleaner code, easier to read and share**. > - [Vue3 为什么要使用 Composition API](https://juejin.cn/post/6875253488017342478) ### 优点 #### 【高内聚】聚合业务逻辑，提高代码可读性 - Vue2 中**逻辑关注点**是碎片化的，使得**理解和维护复杂组件**变得困难。属性选项（options，如 data、computed、methods 等）的分离增加了潜在的逻辑风险。此外，在处理单个逻辑关注点时，我们必须不断地“跳转”相关代码的属性选项块（option blocks）。 - Vue3 的组合式 API 使我们能将与同一个逻辑关注点相关的代码配置在一起，使代码更加明晰、易读。 ![1.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f0fb86a5968b480d8930ab20c8650564~tplv-k3u1fbpfcp-watermark.image?) #### 【低耦合】便于代码拆分，提高复用性（Hooks） - Vue2 中的常用代码复用方式 —— 混入 [Mixin](https://cn.vuejs.org/v2/guide/mixins.html) 和范围插槽 Scoped Slots，都存在限制。 - 混入最大的缺点是：依赖关系不清晰，不能直观知道它给组件增加了什么属性，而且还可能导致与现有属性和函数的重名冲突。 - 使用范围插槽，可以通过 v-slot 属性确切地知道可以访问哪些属性；但缺点是，只能在模板中访问它，它只能在组件范围内使用。 - 得益于全局 Composition API， Vue3 可以轻松做到代码拆分，可以对复用的逻辑进行随意的组合和配置，并放入setup函数内执行。Vue3 的 setup 聚合了所有的逻辑，容易产生面条代码，合理使用自定义 hooks，可以有效的减少面条代码，提升代码可维护性、可复用性。并且 Vue3 的 hooks 比 react 更加简单高效，不会多次执行，不受调用顺序影响，不存在闭包陷阱等等，几乎可以没有任何心智负担的使用。通过对可复用代码的抽离，我们的代码组织可能变成这样： ![2.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/bc58b8ad49db45a3824f8d9d191a6d01~tplv-k3u1fbpfcp-watermark.image?) ### 应用 #### Vue2 ``` // src/components/UserRepositories.vue export default { components: { RepositoriesFilters, RepositoriesSortBy, RepositoriesList }, props: { user: { type: String, required: true } }, data () { return { repositories: [], // 1 filters: { ... }, // 3 searchQuery: '' // 2 } }, computed: { filteredRepositories () { ... }, // 3 repositoriesMatchingSearchQuery () { ... }, // 2 }, watch: { user: 'getUserRepositories' // 1 }, methods: { getUserRepositories () { // 使用 `this.user` 获取用户仓库 }, // 1 updateFilters () { ... }, // 3 }, mounted () { this.getUserRepositories() // 1 } } ``` #### Vue3 1. 将具体的业务代码提取到一个独立的**组合式函数**中，成为**单独的功能模块（Hook）**； 2. 在组件中使用它们 ``` // src/composables/useUserRepositories.js import { fetchUserRepositories } from '@/api/repositories' import { ref, onMounted, watch } from 'vue' export default function useUserRepositories(user) { const repositories = ref([]) const getUserRepositories = async () => { repositories.value = await fetchUserRepositories(user.value) } onMounted(getUserRepositories) watch(user, getUserRepositories) return { repositories, getUserRepositories } } ``` ``` // src/components/UserRepositories.vue import { toRefs } from 'vue' import useUserRepositories from '@/composables/useUserRepositories' import useRepositoryNameSearch from '@/composables/useRepositoryNameSearch' import useRepositoryFilters from '@/composables/useRepositoryFilters' export default { components: { RepositoriesFilters, RepositoriesSortBy, RepositoriesList }, props: { user: { type: String, required: true } }, setup(props) { const { user } = toRefs(props) const { repositories, getUserRepositories } = useUserRepositories(user) const { searchQuery, repositoriesMatchingSearchQuery } = useRepositoryNameSearch(repositories) const { filters, updateFilters, filteredRepositories } = useRepositoryFilters(repositoriesMatchingSearchQuery) return { // 因为我们并不关心未经过滤的仓库 // 我们可以在 `repositories` 名称下暴露过滤后的结果 repositories: filteredRepositories, getUserRepositories, searchQuery, filters, updateFilters } } } ``` ### 可能的劣势 > [Vue3 composition-api 有哪些劣势? - 知乎](https://www.zhihu.com/question/416652570) reactive 和 ref 的响应式开发的心智负担？见仁见智。 ## [Fragments](https://v3.vuejs.org/guide/migration/fragments.html) > In Vue 3, components now have official **support for multi-root node components**, i.e., fragments! ### Vue2 ``` ``` - 在 2.x 中，由于不支持多根节点组件，当开发者意外创建多个时会发出警告。 - 需要把各组件都包裹在一个 `

` 中。 ### Vue3 ``` ``` - 在 3.x 中，组件可以包含多个根节点。 - [非 prop attribute](https://v3.cn.vuejs.org/guide/component-attrs.html#%E9%9D%9E-prop-%E7%9A%84-attribute)：指传向一个组件，但是该组件并没有相应 [props](https://v3.cn.vuejs.org/guide/component-props) 或 [emits](https://v3.cn.vuejs.org/guide/component-custom-events.html#%E5%AE%9A%E4%B9%89%E8%87%AA%E5%AE%9A%E4%B9%89%E4%BA%8B%E4%BB%B6) 定义的 attribute。常见的示例包括 `class`、`style` 和 `id` 属性。 - 当组件返回单个根节点时，`非 prop attribute` 将自动添加到根节点的 attribute 中。而具有多个根节点的组件不具有该自动 attribute 回退行为。如果未显式绑定 `$attrs`，将发出运行时警告。 - 因此，要求开发者显式定义 attribute 应该分布在哪里。如上所述例子，指明所有传给 Layout 组件的`非 prop attribute` 应用于 main 元素（$attrs 被传递到`

元素`）。 - Vue3 中，组件的 template 被一层不可见的 Fragment 包裹，支持多个根节点。解决了组件需要被一个唯一根节点包裹的问题，**减少了 dom 层级、提升了渲染性能**。 ## [Teleport](https://v3.vuejs.org/guide/teleport.html#using-with-vue-components) > The Teleport feature allows you to render code from one component to others, in different parts of the DOM tree. Previously known as portals, Teleport is now built into Vue 3. - Teleport，即传送门。` 组件`能在**不改变组件内部元素父子关系的情况下，将子元素“传送”到其他指定节点下渲染**，允许我们控制在 DOM 中哪个父节点下渲染 HTML，而不必求助于全局状态或将其拆分为两个组件。 - 适用于某些逻辑上属于某一组件、视图位置上相对于其他组件的部分。将移动实际的 DOM 节点，而不是被销毁和重新创建，并且它还将使任何组件实例保持活动状态。所有有状态的 HTML 元素（如正在播放的视频）都将保持它们的状态。 - 如下：dialog 直接挂载在 container 下，超出部分不可见。 ``` ``` ### Vue3 + ` 组件` ``` ``` - 外面加一层 Teleport，dialog 被渲染为 `body` 标签的子级，展示不会被遮挡。且 dialog 依然是 container 的子元素，逻辑关系不变。 - to 属性指定``内容将被移动到的目标元素，值为 string，必须是有效的查询选择器，如`to="#some-id"`、`to=".some-class"`等。 - `disabled`（可选的 prop）可用于禁用``的功能，值为 boolean，设为 true 时插槽内容不会移动到任何地方，而是呈现在``在周围父组件中指定的位置。 ```

``` ## [Suspense](https://v3.vuejs.org/guide/migration/suspense.html#introduction)【实验性】 >Suspense is an **experimental** new feature and the API could change at any time. It **should NOT be used in production applications.【实验性，生产环境不可用】** - 很多情况下组件在正确呈现之前需要执行某种**异步请求**。对于中间的**等待过程**，通常我们在每个单独的组件中进行处理。` 组件`提供了一种替代方法，允许在组件树上进一步处理等待。 - ` 组件`有两个插槽，各都只允许一个直接子节点。如果在`default 插槽`中的节点可用（异步组件可处于该节点组件树的任何深度，并且不需要与``自身出现在同一个模板中。只有**该节点所有后代都加载完成时，才认为该节点可用**），则展示`default 插槽`内容；否则展示`fallback 插槽`内容。 - 例： ``` ``` ### Vue3 + ` 组件` ``` ``` - 其中，`defineAsyncComponent`方法用于定义异步组件 ## 编译时优化（略） ![3.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2c7a74017da945f8b4c1aa4cc83c34e5~tplv-k3u1fbpfcp-watermark.image?) ## 单文件组件 SFC 语法 ### [` ``` - 只需要在`script`上配置`setup`即可。 - 省去了组件的注册步骤，也没有显式的导出变量的动作。 #### Compiled Output ``` import Foo from './Foo.vue' import { ref } from 'vue' export default { setup() { const count = ref(0) const inc = () => { count.value++ } return function render() { return h(Foo, { count, onClick: inc }) } } } ``` - SFC compiler 会从 ` ``` - ` ``` - 由于组件被引用为变量而不是作为字符串键来注册的，在` ``` - 可以在模板表达式中直接使用导入的函数，不需要手动 return 或通过 `methods` 选项来暴露它 ##### Reactivity ``` ``` - 响应式状态需要明确使用[响应式 APIs](https://v3.cn.vuejs.org/api/basic-reactivity.html) 来创建，在模板中使用时会自动解包 ##### `props` 和 `emits` 选项 ``` ``` - `defineProps` 和 `defineEmits` API 在 ` ``` - 在 script-setup 模式下，不必再配合 async 就可以直接使用 await 了，这种情况下，组件的 setup 会自动变成`async setup()`。 - `async setup()` 必须与 `Suspense` 组合使用，`Suspense` 目前还是处于实验阶段的特性。vue 打算在将来的某个发布版本中开发完成并提供文档，如果感兴趣，可以参照 [tests](https://github.com/vuejs/vue-next/blob/master/packages/runtime-core/__tests__/components/Suspense.spec.ts) 看它是如何工作的。 #### [Q & A](https://github.com/vuejs/rfcs/pull/227#issuecomment-870105222) ### [状态驱动的 CSS 变量（中的 v-bind）](https://v3.vuejs.org/api/sfc-style.html#state-driven-dynamic-css) > SFC ` ``` ## 新的生命周期钩子 - 除了 setup 外，Vue3 的其他生命周期钩子都添加了 on 前缀，更加规范统一。 - 新的钩子需要在 setup 中使用。 - `destroyed` 生命周期选项被重命名为 `unmounted`；`beforeDestroy` 生命周期选项被重命名为 `beforeUnmount`。 | Vue2 生命周期 | Vue3 生命周期 | 执行时间说明 | | --- | --- | --- | | | setup | 在 Vue2 的`beforeCreate` 、`created`之前执行；可以完全代替 2.x 的 `beforeCreate` 和 `created`这 2 个钩子函数。执行 [setup](https://v3.cn.vuejs.org/guide/composition-api-setup.html#context) 时，组件实例尚未被创建；只能访问以下 property：`props`、`attrs`、`slots`、`emit`；**无法访问**以下组件选项：`data`、`computed`、`methods` | | beforeCreate | | 组件创建前执行 | | created | |组件创建后执行| |beforeMount|onBeforeMount|组件挂载到节点上之前执行 |mounted|onMounted|组件挂载完成后执行 |beforeUpdate|onBeforeUpdate|组件更新之前执行 |updated|onUpdated|组件更新完成之后执行 |beforeDestroy|onBeforeUnmount|组件卸载之前执行 |destroyed|onUnmounted|组件卸载完成后执行 |errorCaptured|onErrorCaptured|当捕获一个来自子孙组件的异常时激活钩子函数 - **当生命周期混用时，主版本的回调钩子会相对优先执行**（[ref](https://www.codenong.com/j5e82085a6fb9a03c677/)）。即，如果在 vue3 中同时使用了 vue2 的生命周期写法，vue3 的写法会优先执行。[参考例子](https://blog.csdn.net/weixin_43245095/article/details/112555033)。 - 另外，被包含在 `` 中的组件，会多出两个生命周期钩子函数： | Vue2 生命周期 | Vue3 生命周期 | 执行时间说明 | | --- | --- | --- | |activated|onActivated|被激活时执行 |deactivated|onDeactivated|切换组件后，原组件消失前执行 ### Example - 每个生命周期函数都要先导入才可以使用，并且所有生命周期函数统一放在 `setup` 里运行。 ``` import { defineComponent, onBeforeMount, onMounted } from 'vue' export default defineComponent({ setup () { console.log(1); onBeforeMount( () => { console.log(2); }); onMounted( () => { console.log(3); }); console.log(4); return {} } }) ``` - Output ``` // 1 // 4 // 2 // 3 ``` ## Tree-Shaking >Allow you to **only import the parts of libraries that you need**. Whatever you don't need will be removed via tree-shaking. - Vue3 一共开放了 113 个 API，可以通过如下方式引用： ``` import { ref, reactive, h, onMounted } from "vue"; ``` - 通过 ES6 modules 的引入方式，能够被 AST 静态语法分析感知，从而可以只提取用到的代码片段，达到 Tree-Shaking 的效果，使得 Vue3 最终打包出来的包更小，加载更快。据尤大去年 4 月在 B 站的直播：基本的 hello world 项目大小为 13.5kb，Composition API 仅有 11.75kb，包含所有的运行态仅 22.5kb。 ## 重写 VDOM > - [Vue3 的新特性(三) -- 虚拟DOM的底层原理_前端之神的博客-CSDN博客_vue3虚拟dom](https://blog.csdn.net/qq_42941302/article/details/107964422) > - [Vue3.0性能优化之重写虚拟Dom_summer_zhh的博客-CSDN博客](https://blog.csdn.net/summer_zhh/article/details/108080930) 改进 diff 算法，加快渲染：Vue3.0 在运行时生成`PatchFlag`，用作节点标记。只有带`PatchFlag`的`node`会被真正的追踪，并且无论节点的嵌套层级有多深，动态节点都是直接与 Block 根节点直接绑定的，即当 diff 算法走到根节点时，会直接跳到动态变化的节点，无需遍历静态节点。 | 优化前 | 优化后 | | --- | --- | | 在一个默认的 Virtual Dom 的 diff 中，需要遍历所有节点，而且每一个节点都要比较旧的 props 和新的 props 有没有变化，虽然 js 做这些工作很快，但是在一个大型应用中，不可避免的会影响性能。 | diff 算法看到一个 Block 就只需要看里面有没有动态变化的节点（带`PatchFlag`标记）并追踪就可以了。 | ![4.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/186185a9799d4f91b2375f92bc6a801b~tplv-k3u1fbpfcp-watermark.image?) # Vue3 生态 >【释义】生态：构成开发环境的库、工具以及周边 ## 开发体验改进 ### 构建工具：[vite](https://cn.vitejs.dev/) /vit/ - 一种新型前端构建工具，能够显著提升前端开发体验。它主要由两部分组成： 1. 一个开发服务器，它基于 [原生 ES 模块](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules) 提供了 [丰富的内建功能](https://cn.vitejs.dev/guide/features.html)，如速度快到惊人的 [模块热更新（HMR）](https://cn.vitejs.dev/guide/features.html#hot-module-replacement)。 2. 一套构建指令，它使用 [Rollup](https://rollupjs.org/) 打包你的代码，并且它是预配置的，可输出用于生产环境的高度优化过的静态资源。 - Vite 意在提供开箱即用的配置，同时它的 [插件 API](https://cn.vitejs.dev/guide/api-plugin.html) 和 [JavaScript API](https://cn.vitejs.dev/guide/api-javascript.html) 带来了高度的可扩展性，并有完整的类型支持。 ![5.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b05ae21d288a478399ec6b0e9f44a964~tplv-k3u1fbpfcp-watermark.image?) ![6.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a9ca7e29fbcf4e0f83745de69a2e7e25~tplv-k3u1fbpfcp-watermark.image?) ### 浏览器插件：[Vue devtools beta channel 6.0](https://vueschool.io/lessons/using-vue-dev-tools-with-vuejs-3) > - The [Vue Devtools](https://devtools.vuejs.org/) is an invaluable browser extension to Chrome and Firefox that will speed up your development and bug hunting. > - Vue Devtools 6 supports Vue 3 and as of right now it's in beta and available for [Chrome](https://chrome.google.com/webstore/detail/vuejs-devtools/ljjemllljcmogpfapbkkighbhhppjdbg) and [Firefox](https://github.com/vuejs/vue-devtools/releases/download/v6.0.0-beta.8/vuejs_devtools_beta-6.0.0.8-an+fx.xpi). ![7.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2cb53ce5d0f54d66adaffe661d145430~tplv-k3u1fbpfcp-watermark.image?) ### 更好的 IDE / TS 支持 - 推荐使用 VSCode 和官方拓展 [Vetur](https://github.com/vuejs/vetur)，它为 Vue 3 提供了全面的 IDE 支持。 - Volar：在 VSCode 里可以提供模板中的代码提示功能，提供 TSX 级别的开发体验。 ![8.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/fe7997763776476fa099193038a32e19~tplv-k3u1fbpfcp-watermark.image?) ![9.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0f1f96663d3e4829bf2d2c9eb2383f11~tplv-k3u1fbpfcp-watermark.image?) ## 库 ### [Vue Router 4](https://next.router.vuejs.org/) > - Vue Router 是 [Vue.js](http://v3.vuejs.org/) 的官方路由。它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得轻而易举。 > - [Vue Router 4.0 正式发布！焕然一新。](https://zhuanlan.zhihu.com/p/340331418) > - [Vue Router 4 快速入门_前端精髓-CSDN博客](https://blog.csdn.net/wu_xianqiang/article/details/109910155) - Vue Router 4.0 提供了 Vue 3 支持，并有许多突破性的变化。 - 新功能包括：[动态路由](https://next.router.vuejs.org/zh/api/#addroute-2)、[组合式 API](https://next.router.vuejs.org/zh/guide/advanced/composition-api.html)。详见[迁移指南](https://next.router.vuejs.org/guide/migration/)。 #### 用法 ##### Vue Router3 - 创建方式 ``` import VueRouter from "vue-router" const router = new VueRouter({ // options ...... }) ``` - 路由模式 - `hash`模式利用 URL hash 来模拟完整的 URL，这样当 URL 发生变化时，页面不会被重新加载。 - `history`模式利用 HTML5 History API 来实现 URL 导航，而不需要重新加载页面。 ``` const router = new VueRouter({ mode: 'hash' / 'history' }) ``` - 重定向 ``` { path: '*', redirect: Home } ``` - 挂载方式 - 以属性的方式进行挂载 ``` import router from './router.js' new Vue({ router }) ``` - 组件中的使用 ``` export default({ methods:{ linkToHome(){ this.$router.push({ path:'/' }) } } }) ``` ##### Vue Router4 - 创建方式 - 用 createRouter 创建 router 对象 ``` import { createRouter } from "vue-router" const router = createRouter({ // options ..... }) ``` - 路由模式 ``` import { createRouter, createWebHistory, createWebHashHistory } from 'vue-router' const router = createRouter({ history:createWebHistory() / createWebHashHistory() }) ``` - 重定向 ``` { path: '/:pathMatch(.*)*', // 需要使用正则去匹配 redirect: Home, } ``` - 挂载方式 - 因为 vue3 的 composition api，vue-router 的挂载方式以插件来挂载 ``` import { createApp } from 'vue' import router from './router.js' import App from './App.vue' createApp(App).use(router).mount('#app'); ``` - 组件中的使用 - 因为 setup 中不能访 **this**，所以提供 **useRouter()** 和 **useRoute()** 两个 api 来获取 **router** 和 **route**。 ``` import { useRouter,useRoute } from "vue-router" export default({ setup(){ const router = useRouter(); const route = useRoute(); const linkToHome = () => { router.push({ path:'/' }) } return{ linkToHome } } }) ``` - 导航守卫 - 由于 vue3 composition api，beforeRouteUpdate 和 beforeRouteLeave 被替换为 onBeforeRouteUpdate 和 onBeforeRouteLeave ### [Vuex 4](https://next.vuex.vuejs.org/) > Vuex 是一个专为 Vue.js 应用程序开发的**状态管理模式 + 库**。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 - Vuex 4.0 提供了 Vue 3 支持，其 API 与 3.x 基本相同。唯一的突破性变化是[插件的安装方式](https://next.vuex.vuejs.org/guide/migrating-to-4-0-from-3-x.html#breaking-changes)。 - 新特性：Vuex 4 引入了一个新的 API 用于在组合式 API 中与 store 进行交互。可以在组件的 `setup` 钩子函数中使用 `useStore` 组合式函数来检索 store。 ``` import { useStore } from 'vuex' export default { setup () { const store = useStore() } } ``` ### UI 组件库 > [现阶段应该使用什么 Vue 的 UI 框架? - 知乎](https://www.zhihu.com/question/298703830) #### [Element Plus](https://link.juejin.cn/?target=https://github.com/element-plus/element-plus) >一套为开发者、设计师和产品经理准备的基于 Vue 的桌面端组件库。 #### [Vuetify](https://link.juejin.cn/?target=https://github.com/vuetifyjs/vuetify) > Vuetify 是一款精致的 UI 框架，提供了很多常用的组件，依靠 Material Design 的设计优势，让开发者无需编写一行 css 代码就可以得到非常美观的界面功能。响应式较强，移动 PC 多端支持，配置灵活，组件种类功能较为全面。 #### [Ant Design Vue](https://link.juejin.cn/?target=https://github.com/vueComponent/ant-design-vue) > 开发和服务于企业级后台产品。 #### [Vant（Vue 3 版本）](https://vant-contrib.gitee.io/vant/next) >有赞前端团队开源的移动端组件库，于 2017 年开源，已持续维护 4 年时间，是业界主流的移动端 Vue 组件库之一。目前 Vant 官方提供了[ Vue 2 版本](https://vant-contrib.gitee.io/vant)、[Vue 3 版本](https://vant-contrib.gitee.io/vant/next)和[微信小程序版本](http://vant-contrib.gitee.io/vant-weapp)，并由社区团队维护 [React 版本](https://github.com/mxdi9i7/vant-react)。 ### 开发框架 #### [Quasar](https://link.juejin.cn/?target=https://github.com/quasarframework/quasar) > Effortlessly build high-performance & high-quality Vue.js 3 user interfaces in record time. 编写一次代码，可同时将其部署为网站、移动应用程序和/或电子应用程序（[Electron App](https://zhuanlan.zhihu.com/p/69109695)）。 #### [Nuxt 3](https://link.juejin.cn/?target=https://github.com/nuxt/nuxt.js) >- A framework making web development simple and powerful. > - Nuxt.js 是一个基于Vue.js 的轻量级应用框架，可用来创建服务端渲染(SSR) 应用，也可充当静态站点引擎生成静态站点应用，具有优雅的代码结构分层和热加载等特性。 #### [VuePress](https://vuepress.vuejs.org/) >VuePress 专注在以内容为中心的静态网站上，同时提供了一些为技术文档定制的开箱即用的特性。由两部分组成：一个[极简静态网站生成器](https://github.com/vuejs/vuepress/tree/master/packages/@vuepress/core)（包含由 Vue 驱动的[主题系统](https://www.vuepress.cn/theme/)和[插件 API](https://www.vuepress.cn/plugin/)）+ 为书写技术文档而优化的[默认主题](https://www.vuepress.cn/theme/default-theme-config.html)；初衷是为了支持 Vue 及其子项目的文档需求。 #### [VitePress](https://vitepress.vuejs.org/) >VitePress is [VuePress](https://vuepress.vuejs.org/)' little brother, built on top of [Vite](https://github.com/vitejs/vite). ![10.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c1c7560c133845d9a2b48ea662933e46~tplv-k3u1fbpfcp-watermark.image?) ## 兼容性 - 不支持 IE11 - 2021 年第二季度底，Vue3 成为默认版本 - 默认现代模式：vite + vue3 ### vue2 TO vue3 工具：[gogocode](https://gogocode.io/zh/docs/specification/vue2-to-vue3) > 由于 Vue3 对于 Vue2 在 Api 层面存在诸多兼容问题，并不能做到平滑升级。利用 [gogocode](https://gogocode.io/) 这个代码转换利器，根据 [v3迁移指南](https://v3.cn.vuejs.org/guide/migration/introduction.html)，利用它操作AST，开发了一套 Vue2 [升级工具](https://github.com/thx/gogocode/tree/main/packages/gogocode-plugin-vue)。利用这套工具能够快速地把 Vue2 代码升级到 Vue3。 # Reference > - [Vue3 新特性](https://v3.vuejs.org/guide/migration/introduction.html#overview)（[CN](https://v3.cn.vuejs.org/guide/migration/introduction.html#%E5%80%BC%E5%BE%97%E6%B3%A8%E6%84%8F%E7%9A%84%E6%96%B0%E7%89%B9%E6%80%A7)） > - [升级 Vue3 大幅提升开发运行效率](https://mp.weixin.qq.com/s/vZvqCYECOHjFVakMywEa3w) > - [Vue.js作者尤雨溪在VueConf 2021谈Vue 3 生态进展_哔哩哔哩_bilibili](https://www.bilibili.com/video/BV1JK4y1G7bf?from=search&seid=8955398424571415149) > - [尤雨溪在VueConf上关于Vue3生态进展的分享速览](https://juejin.cn/post/6964997137025204260) > - [State of Vue 2021](https://www.monterail.com/hubfs/state_of_vue_2021/State_of_vue.js_2021_report_by_Monterail.pdf)