iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 9
0
自我挑戰組

Vue.js 初學筆記系列 第 9

09. Vue 的生命週期

  • 分享至 

  • xImage
  •  

先來點比喻

就跟噴火龍一樣,要成為完整的 Vue 實體,要先從蛋 → 小火龍 → 火恐龍 → 噴火龍一步一步進化與成長。在我們享受 vue 有如噴火龍的大字爆炎強大功能時,其實每次 Vue 實例都要經過蛋、小火龍跟火恐龍的成長階段。

而且,在成長階段中,我們還可以指定 Vue 還是小火龍的階段時,先做些什麼事情(學賣萌之類的)。到火恐龍的階段時,再做什麼事情(耍中二之類的)。當然到了噴火龍階段,你還可以使他進行許多的變化,例如裝備道具、學新招式、Mega 進化成 Mega 噴火龍 X 或 Mega 噴火龍 Y。

經過一番激鬥之後,任務完成,體會了生命的意義,噴火龍壽終正寢。

https://ithelp.ithome.com.tw/upload/images/20190920/20120340RkJORf6mik.png「我的人生,過得實在太充實美妙啦!」

不過我得承認這個比喻非常不精準,因為我之前認識到 Vue 可能會把火恐龍的階段的事情先做了,但小火龍階段的事情還沒做好,導致程式出錯。寫程式時還需要額外處理。

生命週期掛勾(life-cycle hook)

正式來說,Vue 實體被初始化之前直到完成,有以下過程,在每個粗體字所顯示的掛鉤中,我們都可以在裡面寫程式碼,讓各個階段準備好我們需要的資料與運算,讓小火龍順利進化成噴火龍。

  • beforeCreate - Vue 實體初始化之前
  • created - Vue 實體初始化之後,加入 DOM 之前
  • beforeMount - 確認有哪些元素(el,template等等)準備好加入 DOM 之前
  • mounted - 確認而且建置好元素之後,進行編譯與掛載(可是這是 ing 進行式,不是已加入 DOM)
    到這裡我們就是個完整的 Vue 實體,噴火龍可以上戰場了。另外,mounted算是最常用到的,例如 AJAX 取得 JSON 資料時的程式碼就可以考慮放在 mounted掛勾。
let vm = new Vue({
    el: '#app',
    data: {
        getJson: [], // 把從遠處 JSON 得來的資料放在這
    },
    mounted(){
        const that = this; // 作用域問題,賦予 that 一個 this 的意思
        const api = ' JSON 網址 '; // 要從哪裡得到資料

        $.get(api).then(function(response) { // 用 jQuery 函式庫去取得 JSON 資料
        that.getJson = response; // 把得來的資料放進 Vue 實例的 data 裡
        });
    },
})

這樣子,Vue 實體渲染頁面時,就可以自動依據data內資料渲染頁面,使用我們之前學過的 v-forv-textv-on等等功能。不用特地做個按鈕,按下去才去從遠端找資料,才渲染畫面。

不只是剛剛的掛勾,當輸出到 DOM 的資料有變動,還有整個 Vue 實體銷毀的時候,還會有以下四個掛勾。

  • beforeUpdate - 接收到更改數據的命令,要重新渲染 DOM 之前。
  • updated - 已經更改數據、重新渲染 DOM 了。
  • beforeDestroy - 整個 Vue 實體要銷毀、從 DOM 移除之前。
  • destroyed - Vue 實體銷毀之後。

不過今天或許會突然想說:我沒有要讓我的噴火龍安心去世啊!我只是想暫時「藏起來」而已,因為待會可能還會再用到,而且甚至還要預留保存使用者已經輸入的資料。

這得到「Vue 元件」的<keep-alive>講解,這裡先知道大概就好:的確,是可以透過<keep-alive>保持實體的狀態,而且可以在mounted之後進入activated掛勾,需要時維持activated,隱藏時進入deactivated掛勾。

  • activated - keep-alive元件啟用時,重複啟用元件時也會重新觸發一次,不會全局刷新 vue.js,所以created也不會再被觸發。
  • deactivated - keep-alive元件停用時,隱藏且緩存資料,避免重新被渲染。

此文諸多不周到的地方還請各方大大多多包涵指教。


上一篇
08. Vue的指令:v-for 用陣列渲染列表
下一篇
10. Vue 的 元件基礎
系列文
Vue.js 初學筆記10
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言