您好,登錄后才能下訂單哦!
項目背景
在主文件index.vue中初始化頁面相關的操作,
在mounted中放置用戶權限判斷并更新store中的權限值,當點擊相應組件時mounted可正常工作,
但是在用戶手動刷新時mounted內(nèi)的函數(shù)并未執(zhí)行,導致相應組件未獲取到權限而顯示異常
問題解決
首先,這跟vue生命周期有關,圖就不貼了,直接說原因。
當用戶f5刷新頁面時,整個頁面會重新去請求,js的狀態(tài)變量消失,但是el節(jié)點并未重新建立。
因為,mounted是el被新創(chuàng)建的vm.$el替換,并掛載到實例上去之后調(diào)用的鉤子,此處el并未重新掛載,故該鉤子函數(shù)不會被調(diào)用。
此處可以將用戶權限判斷的方法根據(jù)實際情況寫在beforeMount或created中
常見的鉤子觸發(fā)事件
beforeCreate
在實例初始化之后,數(shù)據(jù)觀測(data observer) 和 event/watcher 事件配置之前被調(diào)用。數(shù)據(jù)和實例都不能訪問
created
實例已經(jīng)創(chuàng)建完成之后被調(diào)用。在這一步,實例已完成以下的配置:數(shù)據(jù)觀測(data observer),屬性和方法的運算, watch/event 事件回調(diào)。然而,掛載階段還沒開始,$el 屬性目前不可見。
數(shù)據(jù)可以訪問,實例不可訪問
beforeMount
在掛載開始之前被調(diào)用:相關的 render 函數(shù)首次被調(diào)用。
DOM掛載前,數(shù)據(jù)可訪問,實例$el為虛擬DOM節(jié)點,不可訪問,數(shù)據(jù)還未插入DOM中
mounted
el 被新創(chuàng)建的 vm.el替換,并掛載到實例上去之后調(diào)用該鉤子。此時 el 替換,并掛載到實例上去之后調(diào)用該鉤子。此時el替換,并掛載到實例上去之后調(diào)用該鉤子。此時el為真實的DOM元素
beforeUpdate
數(shù)據(jù)更新時調(diào)用,發(fā)生在虛擬 DOM 重新渲染和打補丁之前。 你可以在這個鉤子中進一步地更改狀態(tài),這不會觸發(fā)附加的重渲染過程。
updated
數(shù)據(jù)更新之后。
由于數(shù)據(jù)更改導致的虛擬 DOM 重新渲染和打補丁,在這之后會調(diào)用該鉤子。
當這個鉤子被調(diào)用時,組件 DOM 已經(jīng)更新,所以你現(xiàn)在可以執(zhí)行依賴于 DOM 的操作。然而在大多數(shù)情況下,你應該避免在此期間更改狀態(tài),因為這可能會導致更新無限循環(huán)。
該鉤子在服務器端渲染期間不被調(diào)用。
beforeDestroy
實例銷毀之前調(diào)用。此時實例還可以使用
destroyed
Vue 實例銷毀后調(diào)用。此時Vue實例指示的所有東西都會解綁定,所有的事件監(jiān)聽器會被移除,所有的子實例也會被銷毀。 該鉤子在服務器端渲染期間不被調(diào)用。
以上這篇解決vue項目F5刷新mounted里的函數(shù)不執(zhí)行問題就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持億速云。
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權內(nèi)容。