vue2项目迁移到vue3中需要做什么处理
1. 更改script标签
为了方便写代码，在这里我们使用
而在vue3里我们使用ref()定义简单数据类型，reactive()定义复杂数据类型 上述的变量即可定义为：
在vue3中，直接定义即可
把组件接收到的原始 prop 作为参数传递给默认函数，这个prop是传递给组件的原始值
10.自定义指令的 API 已更改为与组件生命周期一致，且 binding.expression 已移除
vue3中指令api和组件的api保持一致，具体的表现有：
-
created - 新增！在元素的 attribute 或事件监听器被应用之前调用。
-
bind → beforeMount
-
inserted → mounted
-
beforeUpdate：新增！在元素本身被更新之前调用，与组件的生命周期钩子十分相似。
-
update → 移除！该钩子与
updated有太多相似之处，因此它是多余的。请改用updated。 -
componentUpdated → updated
-
beforeUnmount：新增！与组件的生命周期钩子类似，它将在元素被卸载之前调用。
-
unbind -> unmounted
11.来自 mixin 的 data 选项现在为浅合并
将共享数据提取到外部对象并将其用作 data 中的 property
重写对共享数据的引用以指向新的共享对象
当来自组件的 data() 及其 mixin 或 extends 基类被合并时，合并操作现在将被浅层次地执行：
const Mixin = {
data() {
return {
user: {
name: 'Jack',
id: 1
}
}
}
}
const CompA = {
mixins: [Mixin],
data() {
return {
user: {
id: 2
}
}
}
}
在 Vue 2.x 中，生成的 $data 是：
{
"user": {
"id": 2,
"name": "Jack"
}
}
在 3.0 中，其结果将会是：
{
"user": {
"id": 2
}
}
12.一些过渡的 class 被重命名
过渡类名 v-enter 修改为 v-enter-from、过渡类名 v-leave 修改为 v-leave-from。
13.不再默认渲染包裹元素
Vue 2.x 的
Vue 2.x tag prop 来进行手动设定。如果我们不进行手动的设定，Vue 会默认添加作为根元素。
{{ item }}
Vue 3.x
如果您已经tag在Vue 2代码中定义了prop，就像上面的示例一样，一切将像以前一样工作 如果您没有定义一个样式，而您的样式或其他行为依赖于根元素的存在才能正常工作，则只需添加 tag="span" 到
14.当侦听一个数组时，只有当数组被替换时，回调才会触发，如果需要在变更时触发，则必须指定 deep 选项
15.vuex 调整
升级前，我们使用时写法一般如下：
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
modules: {
...
},
...
})
升级后，修改为如下写法：
import { createStore } from 'vuex'
const store = createStore({
modules: {
...
},
...
})
16.vue-router 调整
升级前，我们使用时写法一般如下：
import Vue from 'vue'
import Router from 'vue-router'
const constantRouterMap = {
// 路由配置
...
}
Vue.use(Router)
const createRouter = () =>
new Router({
...
routes: constantRouterMap
})
const router = createRouter()
export default router
升级后，修改为如下写法：
import { createRouter, createWebHashHistory } from 'vue-router'
const constantRouterMap = {
// 路由配置
...
}
/*
官方文档说明：
新的 history 配置取代 mode#
mode: 'history' 配置已经被一个更灵活的 history 配置所取代。根据你使用的模式，你必须用适当的函数替换它：
"history": createWebHistory()
"hash": createWebHashHistory()
"abstract": createMemoryHistory()
更多内容可以参见官方文档：https://router.vuejs.org/zh/guide/migration/index.html#%E6%96%B0%E7%9A%84-history-%E9%85%8D%E7%BD%AE%E5%8F%96%E4%BB%A3-mode
*/
const router = createRouter({
history: createWebHashHistory(), // hash模式
scrollBehavior: () => ({ y: 0 }),
routes: constantRouterMap,
})
export default router
17.main.js 调整
升级前，我们使用时写法一般如下
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
...
import util from './utils/export' // 自己封装的全局通用方法库
// 可以直接这样绑定到Vue的原型链上
Vue.prototype.$util = util
...
new Vue({
el: '#app',
router,
store,
render: h => h(App)
}).$mount('#app')
升级后，修改为如下写法：
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
...
import util from './utils/export'
...
const app = createApp(App)
app.use(router)
app.use(store)
app.config.globalProperties.$util = util
...
app.mount('#app')
18. 更新插件和库
如果你在你的Vue2应用程序中使用了许多插件和库，你需要确保它们也支持Vue3。如果不支持Vue3，你需要寻找一个适配Vue3的替代品。
参考文档介绍 | Vue.js