在 Vue 過氣前要學的第二十七件事 - 是一輩子喔? 一輩子

17th鐵人賽鐵人賽 vue3 javascript vue.js

Yanya

2025-09-27 00:03:03

34 瀏覽

分享至

前言

終於! 我們進到最後一個篇章，進階使用之生命週期篇;

之所以會把生命週期擺在這麼後面是因為 :

只有實際寫過的人，才能更好的理解，
所謂不同生命週期具體是指什麼?

不建議去硬背順序，那並不會對於你的使用有更好的提升，
在 Vue 實例被創建前到卸載後這一連串經歷的過程，

就被稱作生命週期。

而能在特定階段，進行自定義程式碼的函數，就叫做生命階段 hook。

在我們一般使用者的角度來說，大多數的 hook 可能是不常使用的，
真的有必要的時候再去查就好了。

不過大概了解生命週期，會對於該在何時做操作會更有概念。

概念 & 圖示

這邊的話我先上兩張圖，

一張是 Option API Lifecycle :

一張是 Composition API Lifecycle hooks:

那我主要會根據 Composition API 的方式去介紹;

不過在那之前我先講一下上面這三階段的順序，
你會看到我畫了兩條線;

一個是建立掛載->取消掛載，
一個是建立掛載->更新->取消掛載。

這兩者都是有可能的，畢竟有些頁面是靜態不會有更新狀態;

這邊想問大家覺得靜態網頁跟動態的差異是什麼，是畫面會不會更新嗎?
那有動畫的網站可以算是動態網站嗎?

這問題我們將會在明天的文章解答

我目前來說常用到的生命週期 hook 就是以下四種 :

那這個 onServerPrefetch 並沒有被我畫在圖片中，
因為他並不是常見生命週期的 hook。

其實還有一些 hooks 是我沒有提到的，但蠻多都是特殊情況才會用到，
沒必要全都背起來，詳情可以看組合式 API：生命周期鉤子

那你可能會問 setup() 呢? 我沒看到阿 ?
setup() 在這邊是比較特殊的一個存在，
大家還記得在 Vue 過氣前要學的第二件事 - Vue 到底是什麼中，
我提到的 :

<script setup> 其實是 Composition API 的 setup() 的語法糖

我們先看一下 <script> + setup() 的寫法 :

<script>
import { ref } from 'vue'

export default {
  setup() { 
    const count = ref(0)
    // 在 setup() 裡面聲明的響應式狀態可以暴露給模板直接使用並解包
    return {
      count
    }
  },
    
  mounted() {
    console.log(this.count)// 0
  }
}
</script>

<template>
  <h1>{{ count }}</h1> <!-- 0 -->
</template>

Talk is cheap. Show me the code.

了解生命週期最好的辦法還是你實際寫過，
所以我們就來依照實際程式碼看看到底會照什麼順序渲染吧。

<!-- App.vue -->
<script setup>
import { ref } from 'vue'
import Comp from './Comp.vue'

const show = ref(true)
</script>

<template>
  <div>
    <button @click="show = !show">
      {{ show ? '卸載元件' : '掛載元件' }}
    </button>
    <Comp v-if="show" />
    <!-- 這邊透過 v-if 手動切換，這樣可以更好的透過畫面了解卸載會經過什麼階段 -->
  </div>
</template>

<!-- Comp.vue -->
<script>
import {
  ref,
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted
} from 'vue'

export default {
  name: 'Comp',
  // 為了更好了解 setup(), 這邊顯式使用
  setup() {
    console.log('🔵 setup() - 組件開始建立')

    const count = ref(0)

    // 建立掛載階段
    onBeforeMount(() => {
      console.log('🟡 onBeforeMount - 掛載前')
    })

    onMounted(() => {
      console.log('🟢 onMounted - 掛載完成')
    })

    // 更新階段
    onBeforeUpdate(() => {
      console.log('🟠 onBeforeUpdate - 更新前')
    })

    onUpdated(() => {
      console.log('🟢 onUpdated - 更新完成')
    })

    // 取消掛載階段
    onBeforeUnmount(() => {
      console.log('🔴 onBeforeUnmount - 卸載前')
    })

    onUnmounted(() => {
      console.log('⚫ onUnmounted - 卸載完成')
    })

    return {
      count
    }
  }
}
</script>

<template>
  <div>
    <h1>Composition API Lifecycle</h1>
    <button @click="count++">增加 Count</button>
    <p>Count: {{ count }}</p>
  </div>
</template>