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

vue 頁面回退mounted函數(shù)不執(zhí)行的解決方案

 更新時間:2020年07月26日 09:37:32   作者:_花小七  
這篇文章主要介紹了vue 頁面回退mounted函數(shù)不執(zhí)行的解決方案 ,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧

前言

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

經(jīng)過一番面向百度研究,終于找到了問題所在。接下來就記錄一下這個問題及其解決的方法。

原理

其實這個問題主要涉及到vue生命周期,對vue生命周期理解不夠深刻的同學可以去官網(wǎng)學習一下:https://vuejs.org/v2/api/#Options-Lifecycle-Hooks

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

當在項目中引入keep-alive的時候,頁面第一次進入,鉤子函數(shù)的觸發(fā)順序created -> mounted -> activated,退出時觸發(fā)deactivated。當再次進入(前進或者后退)時,只觸發(fā)activated。

我們知道 keep-alive 之后,頁面模板第一次初始化解析變成HTML片段后,再次進入就不再重新解析而是讀取內(nèi)存中的數(shù)據(jù),即,只有當數(shù)據(jù)變化時,才使用VirtualDOM進行diff更新。故,頁面進入的數(shù)據(jù)獲取應該在activated中也放一份。數(shù)據(jù)加載完畢手動操作DOM的部分也應該在activated中執(zhí)行才會生效。

所以,應該activated中留一份數(shù)據(jù)獲取的代碼,或者不要created部分,直接將created中的代碼轉移到activated中。

html結構

js部分--vue生命周期

  beforeCreate () {
    console.log('在實例初始化之前調(diào)用')
  }
  created () {
    console.log('在實例初始化之后調(diào)用,經(jīng)常用于操作數(shù)據(jù),發(fā)起ajax請求')
  }
  beforeMount () {
    console.log('在掛載開始之前被調(diào)用,如果是在服務器端渲染時不被調(diào)用;在這個函數(shù)里,無法獲取元素')
  }
 
  mounted () {
    console.log('在掛載后被調(diào)用,也不能在服務器端渲染時被調(diào)用;這個函數(shù)里,是可以獲取元素,并進行操作的')
  }
  beforeUpdate () {
    console.log('視圖層數(shù)據(jù)更新前調(diào)用,發(fā)生在虛擬 DOM 打補丁之前。這里適合在更新之前訪問現(xiàn)有的 DOM')
  }
  updated () {
    console.log('視圖層數(shù)據(jù)更新后調(diào)用')
  }
  beforeDestroy () {
    console.log('實例銷毀之前調(diào)用,在被銷毀的組件中進行調(diào)用;有一些操作,會在實例已經(jīng)銷毀的時候還在運行,這時候為了性能考慮,就在這里結束哪些操作')
  }
  destroyed () {
    console.log('實例銷毀后調(diào)用。')
  }

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

activated () {
console.log('實例被激活時使用,用于重復激活一個實例的時候')
}
deactivated () {
console.log('實例沒有被激活時')
}

總結

keep-alive是Vue的內(nèi)置組件,能在組件切換過程中將狀態(tài)保留在內(nèi)存中,防止重復渲染DOM;導致在組件mounted鉤子中調(diào)用的刷新頁面內(nèi)容時,這個鉤子沒有被調(diào)用。

故:使用Vue組件切換過程,執(zhí)行鉤子activated(keep-alive組件激活時調(diào)用),而不是掛載鉤子mounted。

補充知識:vue 子組件 created 方法不執(zhí)行問題

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

以上這篇vue 頁面回退mounted函數(shù)不執(zhí)行的解決方案就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。

相關文章

最新評論