手摸手带你玩转Vue3——Vue2升级Vue3

今年年初，尤大大公布了一个重磅消息，将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语法 直接使用 @clickfilters ：在 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来获取