前回は ref や reactive、template について学びました。
今回はVueを勉強していると必ず出てくる
ライフサイクルフック（Lifecycle Hooks）
について紹介します。
ライフサイクルって何？
人間にも一生がありますよね。
👶 生まれる
↓
🏫 学校へ行く
↓
👨 大人になる
↓
👴 おじいちゃん・おばあちゃんになる
Vueのコンポーネントも同じです。
コンポーネントには
- 作られる
- 画面へ表示される
- 更新される
- 画面から消える
という流れがあります。
この一連の流れを
ライフサイクル（Lifecycle）
と呼びます。
ライフサイクルフックとは？
ライフサイクルの途中で
「ここで処理を書きたい！」
というタイミングがあります。
例として
- APIからデータを取得したい
- DOMを取得したい
- タイマーを開始したい
- イベントを登録したい
などです。
そのような処理を書く場所が
ライフサイクルフックで、
Vueが決めたタイミングで
自分の処理を追加できる仕組みです。
ライフサイクルの全体像
Component生成
▼
setup()
▼
beforeMount
▼
DOM作成
▼
onMounted
▼
データ変更
▼
beforeUpdate
▼
updated
▼
beforeUnmount
▼
onUnmounted
初心者のうちは
「こんな流れがあるんだな」
くらいで十分です。
よく使うライフサイクルフック
Vueにはたくさんのライフサイクルフックがあります。
しかし初心者のうちは全部覚える必要はありません。
まずはこの4つだけ覚えましょう。
| フック | 役割 |
|---|---|
| setup() | 初期設定を行う |
| onMounted() | 画面表示後に実行される |
| updated() | 画面更新後に実行される |
| onUnmounted() | 画面が消える時に実行される |
onMountedとは？
コンポーネントが画面へ表示された直後
に実行されます。
例えば
- API通信
- DOM取得
- 初期処理
などを書くことが多いです。
<script setup>
import { ref, onMounted } from 'vue'
const pElementRef = ref(null)
onMounted(() => {
console.log('画面へ表示されました！')
})
</script>
<template>
<p ref="pElementRef">
Hello Vue
</p>
</template>
なぜonMountedでDOMを取得するの？
<script setup>
が実行される時点では
まだ画面には
<p>Hello</p>
は存在していません。
setup()
↓
DOMまだないという状態です。
そのため
pElementRef.value //nullになる
その後
Vueが画面を作り終えると
DOM完成
↓
onMounted()
となります。
onMounted(() => {
console.log(pElementRef.value)
})
では
ちゃんとDOMを取得できます。
ref(null)って何？
const pElementRef = ref(null)
これは
DOMを入れる箱
を作っています。
最初は
pElementRef
┌──────────┐
│ value │
│ null │
└──────────┘
画面が完成すると
Vueが自動で
pElementRef
┌──────────────────┐
│ value │
│ <p>Hello</p> │
└──────────────────┘
にしてくれます。
そのため
pElementRef.value
でDOMを取得できます。
onUnmountedとは？
逆に画面からコンポーネントが消える時に使います。
setInterval()
を使っていた場合
画面が消えても止めないと
裏でずっと動き続けます。
そのため
<script setup>
import { onMounted, onUnmounted } from 'vue'
let timer
onMounted(() => {
timer = setInterval(() => {
console.log('実行中')
}, 1000)
})
onUnmounted(() => {
clearInterval(timer)
})
</script>
このように
開始と終了をセットで書くことが多いです。
まとめ
ライフサイクルフックとは
Vueが決めたタイミングで、自分の処理を追加できる仕組み
基本的には
- 🛠️ setup → 初期設定
- 🖥️ onMounted → 画面に表示された
- 🔄 updated → 画面が更新された
- 🗑️ onUnmounted → 画面から消える
この4つをまずは使ってみるのが
覚えるのに良いかと思います。