1. 程式人生 > >vue.js生命週期鉤子函式及快取

vue.js生命週期鉤子函式及快取

生命週期

    在工作中用到最多的就是created,mounted,activated,deactivated.
    由於系統需要快取,使用了keep-alive
        <keep-alive :include="/keepalive[a-zA-Z]+/">
            <router-view></router-view>
        </keep-alive>
    include 和 exclude 屬性允許元件有條件地快取。二者都可以用逗號分隔字串或正則表示式來表示
    匹配首先檢查元件自身的 name 選項,如果 name 選項不可用,則匹配它的區域性註冊名稱(父元件 components 選項的鍵值)。匿名元件不能被匹配。
    //如果希望頁面快取,就在當前頁的name屬性,加上符合正則條件的name名稱。不希望就加上不匹配的正則name名稱。
created
    例項已經建立完成之後被呼叫。在這一步,例項已完成以下的配置:資料觀測(data observer),屬性和方法的運算, watch/event 事件回撥。然而,掛載階段還沒開始,$el 屬性目前不可見。
    //在剛進入頁面的時候,會觸發該函式的方法。只在頁面剛開始載入時執行一次。
mounted
    el 被新建立的 vm.$el 替換,並掛載到例項上去之後呼叫該鉤子。如果 root 例項掛載了一個文件內元素,當 mounted 被呼叫時 vm.$el 也在文件內。
    該鉤子在伺服器端渲染期間不被呼叫。
    //頁面已經完成會執行該函式。
activated
    keep-alive 元件啟用時呼叫。
    該鉤子在伺服器端渲染期間不被呼叫。
    //當頁面存在快取的時候執行該函式。
deactivated
    keep-alive 元件停用時呼叫。
    該鉤子在伺服器端渲染期間不被呼叫。
    //在頁面結束時觸發該方法,可清除掉滾動方法等快取。