vue3升級(jí)常見問(wèn)題詳細(xì)匯總
更新時(shí)間：2023年03月07日 09:42:49 作者：野生切圖仔
隨著vue3?的發(fā)布和越來(lái)越多項(xiàng)目的使用,之前使用?vue2?的項(xiàng)目也不能拉下,vue2?升級(jí)?vue3?迫在眉睫,下面這篇文章主要給大家介紹了關(guān)于vue3升級(jí)常見問(wèn)題的相關(guān)資料,需要的朋友可以參考下
Ⅰ、前言
雖然 vue3 是沒有刪除 vue2 的 選項(xiàng)式 API ， 但是我們升級(jí)vue3 還是需要修改很多問(wèn)題的
下面來(lái)看看我們升級(jí)常見的一些問(wèn)題 ??
Ⅱ、解決兼容問(wèn)題
1、路由的創(chuàng)建方式
① vue2 寫法
const router = new VueRouter({
routes: []
});
export default router;
②改為 vue3 寫法
import { createRouter, createWebHistory } from 'vue-router'
const routerHistory = createWebHistory()
const router = createRouter({
history: routerHistory,
routes: []
})
export default router
2、路由的方法變化
this.$router.push({path: '/bbb', query: {username: "abc"}});
修改為
import { useRouter } from 'vue-router'
const router = useRouter()
router.push({ path:'/bbb', params:{ username: 'posva'} });
3、升級(jí) vuex 到 4.x
| vue2 | vue3 |
|---|---|
| vue2要用vuex 3.x 版本 | vue3要用vuex 4.x 版本 |
4、作用域 插槽語(yǔ)法修改
在 2.6 以下
<template slot-scope="row">
<span>{{row.name}}</span>
</template>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
<template slot="header">
<span>666</span>
</template>
2.6 以上及 3.x 則需要改為 ??
<template v-slot:default="row">
<span>{{row.name}}</span>
</template>
或
<template #default="row">
<span>{{row.name}}</span>
</template>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
<template v-slot:header>
<span>666</span>
</template>
5、具名插槽不能重復(fù)
錯(cuò)誤寫法 ??
<Comp> <span>999</span> <template #default> <span>666</span> </template> <template #default> <span>777</span> </template> </Comp>
正確寫法 ??
<Comp> <template #default> <span>999</span> <span>666</span> <span>777</span> </template> </Comp>
6、根掛載的變化
import Vue from 'vue'
import App from './App.vue'
import router from './router' //路由
import store from './store' //vuex
new Vue({
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' //vuex
createApp(App)
.use(store)
.use(router)
.mount('#app')
7、模板 v-for ，必須在模板上掛載 key
錯(cuò)誤寫法 ??
<template v-for="item in list">
<div :key='item.key'>{{item.name}}</div>
</template>
正確寫法 ??
<template v-for="item in list" :key='item.key'>
<div>{{item.name}}</div>
</template>
8、遞歸組件 寫法變化
如一個(gè)簡(jiǎn)化的tree例子
<template>
<Tree :list ="list">
</template>
<script >
import Tree from './Tree.vue'
export default {
data() {
return {
list:[
{name:'aaa' , children:[{ name:'ccc' }] } ,
{name:'bbb'}
]
}
}
</script>
vue2 需要導(dǎo)入本身
<template>
<div v-for='item in list' :key='item.name'>
<span>{{item.name}}</span>
<Tree :list ="list.children" v-if='list.children'>
</div>
</template>
<script>
import Tree from './Tree.vue'
export default {
components: { Tree },
}
};
</script>
vue3根據(jù)組件名
<template>
<div v-for='item in list' :key='item.name'>
<span>{{item.name}}</span>
<Tree :list ="list.children" v-if='list.children'>
</div>
</template>
<script>
export default {
name:'Tree'
}
</script>
9、深層樣式寫法變化
如 :
::v-deep .input__text{<!--{C}%3C!%2D%2D%20%2D%2D%3E--> }修改為：
:deep(.input__text){<!--{C}%3C!%2D%2D%20%2D%2D%3E--> }可以利用 全局匹配修改
選擇正則匹配
::v-deep\s(.*)\s :deep($1)
10、生命周期鉤子函數(shù) 命名修改
beforeDestroy() => beforeUnmount() destroyed() => unmounted() 刪除 created() 生命周期
11、數(shù)據(jù)總線 eventBus 變化
vue3 中已經(jīng)移除了 eventBus 的一些方法 , 但是通過(guò)一點(diǎn)點(diǎn)代碼就能自己實(shí)現(xiàn)一個(gè)
查看詳情 => vue3 eventBus
12、異步組件
components:{
asyncCom1 :() => import('../components/test-com')
}
vue3 則要 修改為 ??
import { defineAsyncComponent } from 'vue'
const asyncCom2 = defineAsyncComponent(() => import('組件路徑'))
13、ui 組件庫(kù)
ui 組件庫(kù)的 ,則需要參照 ui 組件庫(kù)的文檔進(jìn)行修改
總結(jié)
到此這篇關(guān)于vue3升級(jí)常見問(wèn)題的文章就介紹到這了,更多相關(guān)vue3升級(jí)問(wèn)題內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了Vue+elementUI下拉框自定義顏色選擇器方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-02-02
vue+element-ui表格封裝tag標(biāo)簽使用插槽
這篇文章主要介紹了vue+element-ui表格封裝tag標(biāo)簽使用插槽，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
這篇文章主要給大家介紹了關(guān)于vue-cli3跨域配置的簡(jiǎn)單方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用vue-cli3具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
VUE 實(shí)現(xiàn)element upload上傳圖片到阿里云
這篇文章主要介紹了VUE 實(shí)現(xiàn)element upload上傳圖片到阿里云，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)表格合并功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-12-12
Vue登錄后添加動(dòng)態(tài)路由并跳轉(zhuǎn)的實(shí)踐分享
這篇文章講給大家詳細(xì)介紹一下Vue如何實(shí)現(xiàn)登錄后添加動(dòng)態(tài)路由并跳轉(zhuǎn)，文章通過(guò)代碼示例介紹的非常詳細(xì)，對(duì)我們的學(xué)習(xí)或工作有一定的的幫助,需要的朋友可以參考下2023-07-07
本文主要介紹了vuex命名空間的使用，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要介紹了Vue 中如何正確引入第三方模塊的方法步驟，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
這篇文章主要給大家介紹了關(guān)于vue3.0中使用element的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
Vue3集成Element-plus快速搭建頁(yè)面框架的過(guò)程
ElementPlus是一款基于Vue3的UI組件庫(kù),提供了豐富的組件和響應(yīng)式設(shè)計(jì),易于使用和主題定制,在Vue3項(xiàng)目中集成ElementPlus,需要通過(guò)npm安裝并引入組件,主題色可以通過(guò)修改樣式文件進(jìn)行全局設(shè)置,本文介紹Vue3集成Element-plus快速搭建頁(yè)面框架,感興趣的朋友一起看看吧2025-03-03