[Vue] Day10 生命週期與 Component 元件

2022 iThome 鐵人賽

DAY 10

Modern Web

不用去柬埔寨也能活摘 Vue系列第 10 篇

14th鐵人賽

Hinata

團隊imac_柬埔寨7日遊

2022-09-25 17:43:59

1452 瀏覽

分享至

耶！終於迎來了鐵人賽第十天，撐過了三分之一，恭喜各位也恭喜我自己！
那我們今天呢，就是要跟大家來介紹 Vue 的生命週期，那話不多說，我們開始吧

Vue 的生命週期

簡單來說，在我們初始建立 Vue 的實體時，會進行設置數據，編譯模板，掛載 DOM 等，這些從建立至銷毀的整個過程，所進行的初始化步驟都稱之為生命週期。

Vue生命週期的作用

在 Vue 的生命週期中有許多的事件會觸發，而這樣可以讓我們在控制 Vue 實例時能夠更容易形成邏輯。

Hooks function

在生命週期的這個階段時，Vue 提供了開發者們可以做相對應處理的 callback function，而這些 callback function 我們則稱之為 Hooks function。

那以下我們就來跟大家介紹一下 Vue 提供給開發者們的 Hooks function：
( 以下為 Vue 3.0 的 Hooks 名稱為主，各項目也會補充 Vue 2.x/3.x 的 Hooks 名稱)

創建階段

setup( )：
Vue 2.x/3.x 的 Hooks 名稱：beforeCreate
Vue 的實體已被建立且完成實例初始化，但狀態與事件都尚未被初始化。也可以在此創建 this 去指向創建的實例，也能在此加上 loading 事件，但要注意的是，data、computed、watch、methods 上的方法和數據均不能訪問。
setup( )：
Vue 2.x/3.x 的 Hooks 名稱：created
Vue 的實體已被建立並在伺服器端渲染期間運行，且狀態與事件皆已初始化完成，prop、data、computed 等屬性同樣也已建立完成，但 vm.$el 屬性無法被使用，若需要在客戶端渲染和伺服器渲染期間於元件當中設置事件，須於此階段進行設定。
el & template
首先，會判斷是否有掛載點 ($el)，如沒有將進行 wait，直到 Vue 實體去呼叫 vm.$mount (el)。而如果有掛載點，或是沒有掛載點但卻呼叫了 mount，則就會去判斷是否有使用 template (模板)，如果有的話，就會執行 render template，如沒有就往 el 去執行，使用 el 的外層 HTML 當作被掛載的位置。

掛載階段

onBeforeMonut：
Vue 2.x/3.x 的 Hooks 名稱：beforeMount
Vue 的實體掛載已完成，而 el 的目標 DOM 則被 $el 所替換，且可編譯 template 與outerHTML，並在能在找到對應的 template 後，編譯成 render 函數。
mounted：
完成創建 vm.$el 及雙向綁定，且完成掛載 DOM 和渲染後，可在 mounted 鉤子對掛載的 DOM 進行操作，並且在有了 DOM 和完成雙向綁定後，即可訪問 DOM 節點，$ref 就可發起後端的請求並拿回數據，配合路由鉤子做事情。

更新階段

onBeforeUpdate：
Vue 2.x/3.x 的 Hooks 名稱：beforeUpdate
當狀態被更動且畫面同步更新前時，可在更新前去訪問現有的 DOM，譬如手動去移除添加的事件監聽器。
onUpdated：
Vue 2.x/3.x 的 Hooks 名稱：updated
可完成虛擬 DOM 的重新渲染與新增補丁，且組件 DOM 也已完成更新，能夠執行並依賴 DOM 的操作。要注意的是，請勿在此函數中操作數據，不然會可能會陷入死循環。
activated：
activated 只在有此標籤的時觸發。
** deactivated**：
在有此標籤時退出並觸發 deactivated。

破壞階段

onBeforeUnmount：
Vue 2.x 的 Hooks 名稱：beforeDestroy
Vue 3.x 的 Hooks 名稱：beforeUnmount
在執行 app.$destroy() 之前，可執行刪除提示(如：詢問使用者是否確認刪除？)，通常用於銷毀定時器，去解綁全局時間銷毀插件對象。
onUnmounted：
Vue 2.x 的 Hooks 名稱：destroyed
Vue 3.x 的 Hooks 名稱：unmounted
在 Vue 的實體物件被銷毀完畢後調用。調用後，不只所有的事件監聽器均被移除，子實例也同樣的會被銷毀。此後便無法再進行任何操作。
onErrorCaptured：
Vue 2.x/3.x 的 Hooks 名稱：errorCaptured
子代或孫代的元件的錯誤被捕獲時將觸發

最後，跟各位補充兩個 Vue 2.x/3.x 的生命週期

Vue 2.x/3.x 的 Hooks 名稱：activated
Vue 元件被啟動時會觸發並搭配 keep-alive 使用
Vue 2.x/3.x 的 Hooks 名稱：deactivated
Vue 元件被解除時觸發並搭配 keep-alive 使用

Vue 生命週期表格整理

以上就是對於 Vue 生命週期的簡介ㄌ
接下來要跟各位分享一下 Vue Component 元件基本用法

在寫前端程式時，大部分的開發者都會選擇使用框架，讓我們在處理重複的東西時，只需要處理一次後續就能重複使用，且在後續的維護上也能更加方便。

那我們接下來要跟各位介紹的 Vue component 元件，通常會包含：HTML 元素 (template)、綁定的資料 (data)、方法 (methods) 與監聽 (watch)....等不同的屬性，而他們的用法也與 Vue 實例差不多。

Vue component 元件

Vue 在應用程式的使用上，主要是以 Vue component 元件去組成的，最上層以 Roor 為主，下層則包含 Header, Content 與 side。在每個 component 中的 data 都是互相獨立的，然而在資料傳遞的時候，則需要去仰賴 Props 與 Emit。

Props：由外向內傳入，特性為資料更新時同步傳入 data ，並即刻更新頁面
Emit：由內向外傳出，特性為事件觸發後才會更新資料，屬於事件類型。

元件使用方式

可透過「Global 全域註冊」或「Local 註冊」的方式來去註冊元件，不論全域註冊或局部註冊，都必須在 Vue 實例之前完成。

Global 全域註冊

在註冊元件時，我們會使用 Vue component 的語法去滿足我們需要使用共用元件的需求，而在註冊全域元件時要給予兩個參數：「組件名稱」及「選項物件」。

然而，使用全域註冊要注意的是，無論我們是否使用此元件，都一定會載入。因此在我們使用全域註冊時，會將我們原本不需要使用的組件也載入，導致增加網頁載入的時間。所以若不使用共用元件的話，我們就可以選擇使用局部註冊的方式。

在下方程式碼中，組件名稱為component-layout，而後面的內容則是選項物件。

///// 全域註冊-鐵人賽範例 /////

<div id=”app”>
<component-layout></component-layout>
</div>
<script>
Vue.component("component-layout", {
  template: `<div>{{text}}</div>`,
  data(){
    return{
      text:'鐵人賽範例-全域註冊'
    }
  }
});
let vm = new Vue({
  el: "#app"
});
<script>

Local 局部註冊

考量到全域註冊的缺點後，某些特定的元件就會選擇使用區域註冊的方式去進行，之後在註冊到需要局部使用的元件之中，同時，我們也能稱之為選項物件，並由 components 的選項物件屬性去載入 Vue 實例做使用。

///// 局部註冊-鐵人賽範例 /////

<div id=”app”>
 <component-layout></component-layout>
</div>
<script>
let vm = new Vue({
  el: "#app",
  components:{
    'component-layout' :{
       template: `<div>{{text}}</div>`,
       data(){
         return {
          text:'鐵人賽範例-局部註冊'
         }
       }
     }
  }
});
<script>

data

在 Vue 中，data 可以是物件（Object），也可以是函式（Function），但要注意的是元件中的 data 只能是函式（Function）。而 Vue component 元件是可以重複利用的，且在正常情況下，也是可以去使用不同的資料的，除此之外，如果 data 是函式（Function）的話，當我們每註冊一次組件，就會回傳一個新的物件。

<div id=”app”>
 <my-component></my-component>
</div>
<script>
Vue.component("my-component", {
  template: '<div>{{text}}</div>',
  data(){
    return{
      text:'data 為函式'
    }
  }
});
let vm = new Vue({
  el: "#app"
});
<script>

那我們今天 Vue 生命週期與 Component 元件的介紹就到這裡了謝謝大家
明天會跟各位介紹 Vue 的實體物件與主要 API