vue3升級常見問題詳細匯總
更新時間：2023年03月07日 09:42:49 作者：野生切圖仔
隨著vue3?的發(fā)布和越來越多項目的使用,之前使用?vue2?的項目也不能拉下,vue2?升級?vue3?迫在眉睫,下面這篇文章主要給大家介紹了關于vue3升級常見問題的相關資料,需要的朋友可以參考下
Ⅰ、前言
雖然 vue3 是沒有刪除 vue2 的 選項式 API ， 但是我們升級vue3 還是需要修改很多問題的
下面來看看我們升級常見的一些問題 ??
Ⅱ、解決兼容問題
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、升級 vuex 到 4.x
| vue2 | vue3 |
|---|---|
| vue2要用vuex 3.x 版本 | vue3要用vuex 4.x 版本 |
4、作用域 插槽語法修改
在 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、具名插槽不能重復
錯誤寫法 ??
<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
錯誤寫法 ??
<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、遞歸組件 寫法變化
如一個簡化的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 需要導入本身
<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根據組件名
<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、生命周期鉤子函數 命名修改
beforeDestroy() => beforeUnmount() destroyed() => unmounted() 刪除 created() 生命周期
11、數據總線 eventBus 變化
vue3 中已經移除了 eventBus 的一些方法 , 但是通過一點點代碼就能自己實現一個
查看詳情 => vue3 eventBus
12、異步組件
components:{
asyncCom1 :() => import('../components/test-com')
}
vue3 則要 修改為 ??
import { defineAsyncComponent } from 'vue'
const asyncCom2 = defineAsyncComponent(() => import('組件路徑'))
13、ui 組件庫
ui 組件庫的 ,則需要參照 ui 組件庫的文檔進行修改
總結
到此這篇關于vue3升級常見問題的文章就介紹到這了,更多相關vue3升級問題內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
前端登錄退出處理Token問題(獲取、緩存、失效處理)及代碼實現方法
token是一個用戶信息的表示,在登錄中將會從后端拿到token,然后用戶才可以進行往后的一系列操作,這篇文章主要給大家介紹了關于前端登錄退出處理Token問題(獲取、緩存、失效處理)及代碼實現的相關資料,需要的朋友可以參考下2024-01-01
Vue 將后臺傳過來的帶html字段的字符串轉換為 HTML
這篇文章主要介紹了Vue 將后臺傳過來的帶html字段的字符串轉換為 HTML ,需要的朋友可以參考下2018-03-03
這篇文章主要介紹了vue下載文件以及文件重命名方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
本文主要介紹了element?table?表格控件實現單選功能，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-07-07
本篇文章主要介紹了Vue 父子組件、組件間通信示例，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-03-03
這篇文章主要給大家分享介紹了7個適用于Vue?3的高顏值UI組件庫,合理利用,又或者學習借鑒都是不錯的選擇,文中通過圖文介紹的非常詳細,需要的朋友可以參考下2022-12-12
這篇文章主要介紹了解決vue前后端端口不一致的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2021-07-07
這篇文章主要介紹了vue超時計算的組件實例代碼,需要的朋友可以參考下2018-07-07
這篇文章給大家介紹了Vue3快速實現文件上傳OSS的方法,上傳文件可以說是經典的需求了,在后臺管理項目中隨處可見,一般是由前端進行文件上傳,然后再由后端去處理,本文旨在實現上傳功能,不考慮額外的功能（如文件尺寸限制）,感興趣的朋友可以參考下2024-01-01
vue2.0中vue-cli實現全選、單選計算總價格的實例代碼
本篇文章主要介紹了vue2.0中vue-cli實現全選、單選計算總價格的實例代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07