您好,登錄后才能下訂單哦!
這篇文章主要講解了“Vue3頁(yè)面局部刷新組件的刷新問(wèn)題怎么解決”,文中的講解內(nèi)容簡(jiǎn)單清晰,易于學(xué)習(xí)與理解,下面請(qǐng)大家跟著小編的思路慢慢深入,一起來(lái)研究和學(xué)習(xí)“Vue3頁(yè)面局部刷新組件的刷新問(wèn)題怎么解決”吧!
vue3的生命周期和vue2的生命周期是完全不一樣的
我這里就簡(jiǎn)單介紹一下2者的區(qū)別
Vue2與Vue3 最大的區(qū)別:Vue2使用選項(xiàng)類型API(Options API)對(duì)比Vue3合成型API(Composition API)
舊的選項(xiàng)型API在代碼里分割了不同的屬性: data,computed屬性,methods,等等。新的合成型API能讓我們用方法(function)來(lái)分割,相比于舊的API使用屬性來(lái)分組,這樣代碼會(huì)更加簡(jiǎn)便和整潔
。
export default { props: { title: String, }, data() { return { username: "", password: "", }; }, methods: { login() { //登錄axios請(qǐng)求處理 }, }, components: { buttonComponent: btnComponent, }, computed: { fullName() { return this.firstName + " " + this.lastName; }, }, };
export default { props: { title: String, }, setup() { const state = reactive({ //數(shù)據(jù) username: "", password: "", lowerCaseUsername: computed(() => state.username.toLowerCase()), //計(jì)算屬性 }); //方法 const login = () => { //登錄axios請(qǐng)求處理 }; return { login, state, }; }, };
Vue2--------------vue3 beforeCreate -> setup() created -> setup() beforeMount -> onBeforeMount mounted -> onMounted beforeUpdate -> onBeforeUpdate updated -> onUpdated beforeDestroy -> onBeforeUnmount destroyed -> onUnmounted activated -> onActivated deactivated -> onDeactivated
setup() :開(kāi)始創(chuàng)建組件之前,在beforeCreate和created之前執(zhí)行。創(chuàng)建的是data和method
onBeforeMount() : 組件掛載到節(jié)點(diǎn)上之前執(zhí)行的函數(shù)。
onMounted() : 組件掛載完成后執(zhí)行的函數(shù)。
onBeforeUpdate(): 組件更新之前執(zhí)行的函數(shù)。
onUpdated(): 組件更新完成之后執(zhí)行的函數(shù)。
onBeforeUnmount(): 組件卸載之前執(zhí)行的函數(shù)。
onUnmounted(): 組件卸載完成后執(zhí)行的函數(shù)
若組件被包含,則多出下面兩個(gè)鉤子函數(shù)。
onActivated(): 被包含在中的組件,會(huì)多出兩個(gè)生命周期鉤子函數(shù)。被激活時(shí)執(zhí)行 。
onDeactivated(): 比如從 A組件,切換到 B 組件,A 組件消失時(shí)執(zhí)行。
首先我們要對(duì)app.vue進(jìn)行修改
代碼:
<template> <div id="app"> <nav-View v-show="login" /> <router-view v-if="isRouterAlive" /> <!-- 進(jìn)行v-if判斷 --> <foot-View v-show="login" /> </div> </template> <script> import navView from "@/components/navView.vue"; import footView from "@/components/footer.vue"; import { onMounted, ref, watch ,nextTick,provide,} from "vue";//要引入方法 import { useRouter } from "vue-router"; export default { name: "app", components: { navView, footView, }, created() { console.log("123", this.$route.path); }, setup() { // 局部組件刷新 const isRouterAlive = ref(true); const reload = () => { isRouterAlive.value = false; nextTick(() => { isRouterAlive.value = true; }); }; provide("reload", reload); return { isRouterAlive, }; }, watch: { }, }; </script> <style> * { margin: 0px; } #app { font-family: "Avenir", Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; } </style>
接下來(lái)就是子組件(分頁(yè)的調(diào)用)
代碼:
<template> <div> <!-- input框輸入值,點(diǎn)擊按鈕,看值會(huì)不會(huì)清空 --> <input type="text"> </div> <button @click="refresh">頁(yè)面刷新</button> </template> <script> import { inject } from "vue"; export default{ setup() { const refresh = inject("reload"); //在方法體中的調(diào)用方法 // refresh(); return { refresh, }; }, }; </script>
感謝各位的閱讀,以上就是“Vue3頁(yè)面局部刷新組件的刷新問(wèn)題怎么解決”的內(nèi)容了,經(jīng)過(guò)本文的學(xué)習(xí)后,相信大家對(duì)Vue3頁(yè)面局部刷新組件的刷新問(wèn)題怎么解決這一問(wèn)題有了更深刻的體會(huì),具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云,小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章,歡迎關(guān)注!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。