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

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

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

前言

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

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

原理

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

解決這個(gè)問(wèn)題的關(guān)鍵就在于對(duì)keep-alive的理解和activated鉤子函數(shù)的使用。

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

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

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

html結(jié)構(gòu)

js部分--vue生命周期

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

activated和deactivated配合keep-alive標(biāo)簽使用!

activated () {
console.log('實(shí)例被激活時(shí)使用,用于重復(fù)激活一個(gè)實(shí)例的時(shí)候')
}
deactivated () {
console.log('實(shí)例沒(méi)有被激活時(shí)')
}

總結(jié)

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

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

補(bǔ)充知識(shí):vue 子組件 created 方法不執(zhí)行問(wèn)題

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

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

相關(guān)文章

  • element-ui 上傳圖片后清空?qǐng)D片顯示的實(shí)例

    element-ui 上傳圖片后清空?qǐng)D片顯示的實(shí)例

    今天小編就為大家分享一篇element-ui 上傳圖片后清空?qǐng)D片顯示的實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2018-09-09
  • Vuex中五個(gè)屬性以及使用方法詳解

    Vuex中五個(gè)屬性以及使用方法詳解

    這篇文章主要給大家介紹了關(guān)于Vuex中五個(gè)屬性以及使用的相關(guān)資料,Vuex是一個(gè)專(zhuān)為Vue.js應(yīng)用程序開(kāi)發(fā)的狀態(tài)管理模式,文中通過(guò)代碼示例介紹的非常詳細(xì),需要的朋友可以參考下
    2023-09-09
  • vuex?mutation?action同級(jí)調(diào)用方式

    vuex?mutation?action同級(jí)調(diào)用方式

    這篇文章主要介紹了vuex?mutation?action同級(jí)調(diào)用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-03-03
  • Vue網(wǎng)頁(yè)html轉(zhuǎn)換PDF(最低兼容ie10)的思路詳解

    Vue網(wǎng)頁(yè)html轉(zhuǎn)換PDF(最低兼容ie10)的思路詳解

    這篇文章主要介紹了Vue網(wǎng)頁(yè)html轉(zhuǎn)換PDF(最低兼容ie10)的思路詳解,實(shí)現(xiàn)此功能需要引入兩個(gè)插件,需要的朋友可以參考下
    2017-08-08
  • vue對(duì)象復(fù)制方式(深拷貝,多層對(duì)象拷貝方式在后面)

    vue對(duì)象復(fù)制方式(深拷貝,多層對(duì)象拷貝方式在后面)

    這篇文章主要介紹了vue對(duì)象復(fù)制方式(深拷貝,多層對(duì)象拷貝方式在后面),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-09-09
  • 一文搞懂Vue3中的異步組件defineAsyncComponentAPI的用法

    一文搞懂Vue3中的異步組件defineAsyncComponentAPI的用法

    這篇文章主要介紹了一文搞懂Vue3中的異步組件,文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹,具有一定的參考價(jià)值,需要的小伙伴可以參考一下
    2022-07-07
  • vue使用element-ui tabs切換echarts解決寬度100%方式

    vue使用element-ui tabs切換echarts解決寬度100%方式

    這篇文章主要介紹了vue使用element-ui tabs切換echarts解決寬度100%方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-07-07
  • vue組件間通信子與父詳解(二)

    vue組件間通信子與父詳解(二)

    這篇文章主要為大家詳細(xì)介紹了vue組件間通信子與父的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2017-11-11
  • 淺析Vue中生命周期函數(shù)的區(qū)別

    淺析Vue中生命周期函數(shù)的區(qū)別

    生命周期分為四個(gè)對(duì)子,根據(jù)不同的情況使用不同的函數(shù),這篇文章主要為大家介紹了這些函數(shù)的使用與區(qū)別,感興趣的小伙伴可以了解一下
    2023-08-08
  • vue3中Vant的使用及說(shuō)明

    vue3中Vant的使用及說(shuō)明

    這篇文章主要介紹了vue3中Vant的使用及說(shuō)明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-01-01

最新評(píng)論