欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue3升級(jí)常見(jiàn)問(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í)常見(jiàn)問(wèn)題的相關(guān)資料,需要的朋友可以參考下

Ⅰ、前言

雖然 vue3 是沒(méi)有刪除 vue2 的 選項(xiàng)式 API ， 但是我們升級(jí)vue3 還是需要修改很多問(wèn)題的

下面來(lái)看看我們升級(jí)常見(jiàn)的一些問(wèn)題 ??

Ⅱ、解決兼容問(wèn)題

1、路由的創(chuàng)建方式

① vue2 寫(xiě)法

const router = new VueRouter({
  	routes: []
});
export default router;

②改為 vue3 寫(xiě)法

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

vue2vue3
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ò)誤寫(xiě)法 ??

<Comp>
	<span>999</span>
	<template #default>
		<span>666</span>
	</template>
	<template #default>
		<span>777</span>
	</template>
</Comp>

正確寫(xiě)法 ??

<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ò)誤寫(xiě)法 ??

<template v-for="item in list">
	<div :key='item.key'>{{item.name}}</div>
</template>

正確寫(xiě)法 ??

<template v-for="item in list" :key='item.key'>
	<div>{{item.name}}</div>
</template>

8、遞歸組件 寫(xiě)法變化

如一個(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、深層樣式寫(xiě)法變化

如 :

::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í)常見(jiàn)問(wèn)題的文章就介紹到這了,更多相關(guān)vue3升級(jí)問(wèn)題內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論