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。

補充知識：vue 子組件 created 方法不執行問題

近期做了一個項目 里面有一個樹形菜單，將數據寫在 js （死數據）中,所有的東西都能夠正常執行（i 標簽，子節點，父節點），但是當在請求接口文件或者請求后臺數據的時候，發現引入的子組件的created方法不執行，但是點擊父級菜單展開時還是能夠觸發，后來發現 是生命周期的問題，仔細查看一下，后來解決 解決方法如下：用watch 檢測一下data的數據變化，created方法既然在點擊的時候執行，所以也必須保留，好啦，就這樣

以上這篇vue 頁面回退mounted函數不執行的解決方案就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持好吧啦網。