iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 14
1

前言

今天要在跟各位插播一個概念,因為之後會用到,這也是在Vue的世界裡面相當重要的概念: 就是 life-cycle hook! Hook 本身有鉤子的意思~ 什麼東喜怎麼會有鉤子呢? 就是說 Vue的 instance (https://ithelp.ithome.com.tw/articles/10235021) 生命中有幾個相當重要的階段,每一個階段都有機會可以讓我們去跟他互動,進而產生一些不同的效果~


Vue Instance生命的幾個階段

Life-Cycle Hook
圖片來源: https://vuejs.org/v2/guide/instance.html

圖片英文很多不需要去看沒關係XD~ 我們只需要注意到他大概的流程 還有 紅框白底的部分,這些就是instance他生命中幾個重要的階段~

一個圖就要配一串code才好吃: (這是我們在main.js裡面的檔案)

new Vue({
  el: '#app',
  render: h => h(App),
  router: router
})

beforeCreate

我們就可以想樣這個時候就是在instance剛剛出生,連建立都還沒建立的時候,還是一個空殼子~ 裡面的一些設定例如 data, computed都還沒的階段

created

這時候vue instance裡面已經有 data,該配置的也都配置好了。但是注意一點: el: '#app'這個東西是還沒出現的喔~

複習一下,el: 這個是一個綁定instance掛載的目標就,只是一個模板而已~ 例如這邊就是命名為app,那接下我們只要寫

<div id="app"> Hello </div>

那這樣成功掛載到 div這個目標上~ 而裡面就會是實體的範圍

beforeMount

剛剛說到他只差了一個 el:'#app'就完成建立了~ 這時候只是先確認你有沒有el這樣東西,如果沒有她就會等你一個 .$mounte的指令。在這個時候也會把所有的template和styles都編譯完畢,但還沒有對DOM做任何事情 (畢竟還沒有el,去掛載在DOM上)

mounted

過了三個時段了終於來到mounted,這時候已經compile好所有東西,我們也終於可以看到一個實體頁面了,其他的component也開始可以被使用了,我們平常做的許多更動也都是在這時候提供給我們的~

但這邊要注意一點~ 我們如果是用 vue cli開啟的專案,沒錯就是我們,那基本上mounting這個動作已經在main.js裡面完成了喔~

beforeUpdate, updated

在實體成功建立完整之後,這時候vue就會開始注意有沒有人在叫她~要他去做一些改變,例如改變data或是有人甚至強制他更動

而updated就是在資料做完更動之後立馬出現的階段,這實的頁面已經呈現出新的被渲染完畢的畫面了。

beforeDestroy, destroyed

這跟上面那個update也都是類似的概念,只是要注意到當今天已經destroyed這個階段,那我們接下來所有的操作都沒有用了~ 因為 data, methods阿這些東西都被燒毀了!!

講這麼多不如自己看成效

beforeCreate

首先先讓我們來試試看beforeCreate到底在多早之前就被叫出來了XD

<script>
export default {
beforeCreate() {
 alert('哇我也太早出現!');
 }
}
</script>

如果你npm run serve之後,跑去頁面然後重新整理,你會看到
https://ithelp.ithome.com.tw/upload/images/20200914/20129730Xw7MZpO0oa.jpg

如果你好奇旁邊那個黑黑的是甚麼~ 那是開發者工具,我們可以利用那裏面相當多的功能來檢查網頁! (Windows: cntrl + shoft + I/ Mac: 右鍵 -> inspect)

像是你現在看他完全沒有任何的element,就是因為我們說過他還沒對DOM做任何事情

created

接下來把beofreCreate()改成 created~ 然後再跑一次
就會看到:
https://ithelp.ithome.com.tw/upload/images/20200914/20129730SK37u9gN7m.jpg

這邊有個小錯誤~ 不知道你有沒有發現XD
.
.
.
我們根本還沒掛載instace上去,因為要能看到DOM是要等到mounted之後喔~

mounted

再把code改成mounted()

mounted() {
    alert('我已經都建立好了!!');
}

然後我們就會看到以下這個畫面~ (你可以先猜猜看element這時跑出來了沒~)
https://ithelp.ithome.com.tw/upload/images/20200914/20129730qdXNgkX3lR.jpg

恭喜妳啦終於看到了 head/ body 了!! 這樣就代表這個instance已經成功建立起來囉~


後記

我沒有帶到 updated/ destroyed的範例,但是歡迎各位可以自己試試看喔,可以稍微觀察一下他每一個alert跑出來的時間點跟差異,之後再開發時就會很清楚知道甚麼時間要用到甚麼樣的hook!

這裡有幾段code可以給各位練習看看,觀察一下為什麼會以這樣的順序出現!

data() {
    return {
      greeting: 'Hello Everyone'
    }
},
beforeUpdate(){
    alert('beforeUpdate hook is me la');
},
updated(){
    alert('Updated hook is right here');
},
mounted(){
    this.$data.greeting= 'mounted here lol';
}

上一篇
【D13 - 用Vue實作網頁】Routing 帶你到世界翱翔
下一篇
【D15 - 用Vue實作網頁】牽著for的手,帶你走forever
系列文
到底要怎麼開始開發網站? --- 從入門到使用Vue, Firebase製作老闆交代的網站30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言