今年年初，尤大大公布了一个重磅消息，将Vue3作为Vue的默认版本。
这无疑不是对我们开发人员的内卷煽风点火！
vue默认版本改动意味着，官方将会把Vue研发重心放到vue3上，vue2也开始走下坡路，至于淘汰过时只是时间问题了。从而周边生态、组件、插件等都会以vue3为默认版本重点关注，vue2中的组件插件库将会慢慢得不到维护与迭代更新，因此，我们不得不跟上时代的步伐，转战vue3 ~
-
接下来手把手带大家如何去将我们的vue2项目升级至vue3：
-
创建一个Vue3纯净项目
-
如下图所示，红色框框中的为我们可以直接从Vue2项目中迁移进来的文件夹，蓝色的文件夹则需要我们手动修改
-
src/shims-vue.d.ts 加入一行 declare module ‘*’
-
我们在vue2中的全局挂载（Vue.prototype）写法在vue3中不适用了，需要修改为如下：
import { createApp } from 'vue'
const app = createApp({})
app.config.globalProperties.xxx = xxx
- 组件库语法修改，这里以elementUI为例，element-UI改用elementPLus，引入方式有所改动，部分组件用法也有改变（例如message组件名称）
- 废弃语法修改，vue2中部分语法在vue3里被弃用，我们需要将其改成对应vue3的语法：
- 插槽语法改写：slot具名插槽使用改成#
vue2中slot：
改为如下：
-
s
e
t
方
法
弃
用
，
v
u
e
2
中
可
能
为
了
触
发
数
据
重
渲
染
会
用
到
set 方法弃用，vue2中可能为了触发数据重渲染会用到
set方法弃用，vue2中可能为了触发数据重渲染会用到set方法，但是vue3中reactive或ref直接避免了这个现象的发生，因此也不需要$set
- @click.native语法 直接使用 @click
- filters ：在 vue3.0 中将 filters 对应的方法全部改成方法或者是计算属性的方式去调用
- 生命周期命名修改：
destroyed 生命周期选项被重命名为 unmounted
beforeDestroy 生命周期选项被重命名为 beforeUnmount
- Vue3中的生命周期是在 setup 函数中的，setup 函数中是没有办法调用 this 的，所以在这个地方需要使用另外一个 Api 获取 data 和 methods 的内容
- vue3中的v-model用法改了，最好过一遍官方文档https://v3.cn.vuejs.org/guide/migration/v-model.html#v-model-%E4%BF%AE%E9%A5%B0%E7%AC%A6
- 上下文方法调用，vue2中的this在vue3中要用proxy来获取
