vue 頁面回退mounted函數不執行的問題及解決方法

前言

最近作項目碰到一個很頭大的問題--從a頁面跳到b頁面進行編輯，編輯完再返回a頁面，卻沒走a頁面的鉤子函數mounted，數據沒有更新

通過一番面向百度研究，終於找到了問題所在。接下來就記錄一下這個問題及其解決的方法。

 

原理

其實這個問題主要涉及到vue生命週期，對vue生命週期理解不夠深入的同窗能夠去官網學習一下：https://vuejs.org/v2/api/#Options-Lifecycle-Hooks

解決這個問題的關鍵就在於對keep-alive的理解和activated鉤子函數的使用。

當在項目中引入keep-alive的時候，頁面第一次進入，鉤子函數的觸發順序created -> mounted -> activated，退出時觸發deactivated。當再次進入（前進或者後退）時，只觸發activated。

咱們知道 keep-alive 以後，頁面模板第一次初始化解析變成HTML片斷後，再次進入就再也不從新解析而是讀取內存中的數據，即，只有當數據變化時，才使用VirtualDOM進行diff更新。故，頁面進入的數據獲取應該在activated中也放一份。數據加載完畢手動操做DOM的部分也應該在activated中執行纔會生效。

因此，應該activated中留一份數據獲取的代碼，或者不要created部分，直接將created中的代碼轉移到activated中。

 

html結構

 

js部分--vue生命週期

　　beforeCreate () {

　　　　console.log('在實例初始化以前調用')

　　}

　　created () {

　　　　console.log('在實例初始化以後調用，常常用於操做數據，發起ajax請求')

　　}

　　beforeMount () {

　　　　console.log('在掛載開始以前被調用，若是是在服務器端渲染時不被調用；在這個函數裏，沒法獲取元素')

　　}

 

　　mounted () {

　　　　console.log('在掛載後被調用，也不能在服務器端渲染時被調用；這個函數裏，是能夠獲取元素，並進行操做的')

　　}

　　beforeUpdate () {

　　　　console.log('視圖層數據更新前調用，發生在虛擬 DOM 打補丁以前。這裏適合在更新以前訪問現有的 DOM')

　　}

　　updated () {

　　　　console.log('視圖層數據更新後調用')

　　}

　　beforeDestroy () {

　　　　console.log('實例銷燬以前調用，在被銷燬的組件中進行調用;有一些操做，會在實例已經銷燬的時候還在運行，這時候爲了性能考慮，就在這裏結束哪些操做')

　　}

　　destroyed () {

　　　　console.log('實例銷燬後調用。')

　　}

　　activated和deactivated配合keep-alive標籤使用!

　　activated () {

　　　　console.log('實例被激活時使用，用於重複激活一個實例的時候')

　　}

　　deactivated () {

　　　　console.log('實例沒有被激活時')

　　}

 

總結

keep-alive是Vue的內置組件，能在組件切換過程當中將狀態保留在內存中，防止重複渲染DOM；致使在組件mounted鉤子中調用的刷新頁面內容時，這個鉤子沒有被調用。

故：使用Vue組件切換過程，執行鉤子activated(keep-alive組件激活時調用)，而不是掛載鉤子mounted。