今年年初，尤大大公布了一个重磅消息，将Vue3作为Vue的默认版本。

这无疑不是对我们开发人员的内卷煽风点火！

vue默认版本改动意味着，官方将会把Vue研发重心放到vue3上，vue2也开始走下坡路，至于淘汰过时只是时间问题了。从而周边生态、组件、插件等都会以vue3为默认版本重点关注，vue2中的组件插件库将会慢慢得不到维护与迭代更新，因此，我们不得不跟上时代的步伐，转战vue3 ~

1. 接下来手把手带大家如何去将我们的vue2项目升级至vue3：

2. 创建一个Vue3纯净项目

3. 如下图所示，红色框框中的为我们可以直接从Vue2项目中迁移进来的文件夹，蓝色的文件夹则需要我们手动修改
   

4. src/shims-vue.d.ts 加入一行 declare module ‘*’

5. 我们在vue2中的全局挂载（Vue.prototype）写法在vue3中不适用了，需要修改为如下：

import { createApp } from 'vue'
const app = createApp({})

app.config.globalProperties.xxx = xxx

8. 组件库语法修改，这里以elementUI为例，element-UI改用elementPLus，引入方式有所改动，部分组件用法也有改变（例如message组件名称）
   
9. 废弃语法修改，vue2中部分语法在vue3里被弃用，我们需要将其改成对应vue3的语法：

• 插槽语法改写：slot具名插槽使用改成#
  vue2中slot：
  
  改为如下：
  

8. $set方法弃用，vue2中可能为了触发数据重渲染会用到$set方法，但是vue3中reactive或ref直接避免了这个现象的发生，因此也不需要$set
9. @click.native语法 直接使用 @click
10. filters ：在 vue3.0 中将 filters 对应的方法全部改成方法或者是计算属性的方式去调用
11. 生命周期命名修改：

destroyed 生命周期选项被重命名为 unmounted
beforeDestroy 生命周期选项被重命名为 beforeUnmount

12. Vue3中的生命周期是在 setup 函数中的，setup 函数中是没有办法调用 this 的，所以在这个地方需要使用另外一个 Api 获取 data 和 methods 的内容
13. vue3中的v-model用法改了，最好过一遍官方文档https://v3.cn.vuejs.org/guide/migration/v-model.html#v-model-%E4%BF%AE%E9%A5%B0%E7%AC%A6
14. 上下文方法调用，vue2中的this在vue3中要用proxy来获取