ライフサイクルフック

ライフサイクルフックについて学びましょう。

これは、コンポーネントの生成から破棄までの各段階で処理を実行するための、Vueの重要な機能です。

React経験者の方へ

ReactのuseEffectに相当する機能ですが、より明確に分かれています：

React	Vue
`useEffect(() => {}, [])`	`onMounted(() => {})`
`useEffect(() => { return cleanup }, [])`	`onUnmounted(() => {})`

Vueでは「何をするか」で関数が分かれているため、意図が明確になります。

主なライフサイクルフック

1. onBeforeMount

コンポーネントがDOMにマウントされる直前に実行されます。

2. onMounted

コンポーネントがDOMにマウントされた後に実行されます。

例：DOM要素へのアクセス

<script setup lang="ts">
const el = ref(null)

onMounted(() => {
  console.log('マウントされました！')
  console.log(el.value)
})
</script>

<template>
  <div ref="el">
    Hello
  </div>
</template>

3. onBeforeUnmount

コンポーネントが破棄される直前に実行されます。

4. onUnmounted

コンポーネントが破棄された後に実行されます。

例：タイマーのクリーンアップ

<script setup lang="ts">
onMounted(() => {
  const timer = setInterval(() => {
    console.log('tick')
  }, 1000)
})

onUnmounted(() => {
  clearInterval(timer)
})
</script>

これが、Vueのライフサイクルフックの基本です。

Nuxt (SSR) での注意点

Nuxtでは、コードがサーバーとブラウザの両方で実行されます。これを「SSR（サーバーサイドレンダリング）」と呼びます。

SSRについては、後ほど「ハイドレーション」のセクションで詳しく説明します。

重要なポイント

onMountedとonUnmountedはブラウザでのみ実行される
サーバーでは実行されない

悪い例

<script setup>
const width = window.innerWidth
</script>

良い例

<script setup>
const width = ref(0)

onMounted(() => {
  width.value = window.innerWidth
})
</script>

チャレンジ

プレイグラウンドには、親コンポーネント（app.vue）と子コンポーネント（Child.vue）が用意されています。子コンポーネントのライフサイクルフックを実装して、マウント/アンマウントの回数をカウントしてみましょう。

親コンポーネント（app.vue）での作業

isVisible という ref を作成し、初期値を true にしましょう。
mountCount と unmountCount という ref を作成し、それぞれ初期値を 0 にしましょう。
ボタンをクリックすると isVisible の値を反転させる toggleVisibility 関数を作りましょう。
子コンポーネントから mounted イベントを受け取ったら mountCount を1増やす関数を作りましょう。
子コンポーネントから beforeUnmount イベントを受け取ったら unmountCount を1増やす関数を作りましょう。
v-if="isVisible" を使って、子コンポーネントの表示/非表示を切り替えられるようにしましょう。
template で mountCount と unmountCount を表示しましょう。

子コンポーネント（Child.vue）での作業

emit を定義しましょう（mounted と beforeUnmount の2つのイベント）。
onMounted を追加して、親に mounted イベントを送りましょう。
onBeforeUnmount を追加して、親に beforeUnmount イベントを送りましょう。

ボタンをクリックして、子コンポーネントの表示/非表示を切り替えてみてください。マウント回数とアンマウント回数がカウントされることで、ライフサイクルフックの動作を確認できます！

もし手詰まりになったら、解決策を確認するためのボタンをクリックして、ヒントを得ることができます。

リアクティビティーパート２

前章で ref と computed を使った基本的なデータバインディングを学びました。本章では、watch について学びましょう。この章で基本的なリアクティビティシステムをマスターできます！

コンポーザブルとは何か ?

コンポーザブルとは、Vue の Composition API を活用して再利用可能な状態やロジックを定義するための機能です。Options API で主流な mixins と類似したコンセプトですが、より柔軟で再利用性の高い機能を提供します。Composition API の詳しい説明はこちらをご参照ください。

このページを編集