19 回閲覧されました

みなさんこんにちは、jonioです。

今回はVue.js3のonBeforeUnmountについて簡単なサンプルコードを通して解説します。

Laravelの無料学習サイトを作りました

Laravelを勉強したい人向けの無料の学習サイトを作りました。

ここからリンクに飛べますのでぜひ利用してください。

onBeforeUnmountとは

コンポーネントが破棄される直前に実行される処理を定義する物ですが「コンポーネントが破棄される」の意味が分からないですよね。

例えで説明するとvueのコンポーネントが画面(DOM)からなくなってvueの対象管理ではなくなることを指します。

簡単に言うとコンポーネントがなくなるってことです。

何の為にあるか

vueのコンポーネントがなくなる前に処理を止めないとまずい場合があります。

例えばモーダルを表示している時にAPIを使って何かを自動的に表示していたとします。

モーダルを閉じる前にAPIも止めないとブラウザの容量を食ってブラウザの表示がもっさりになってパフォーマンスが悪くなるかもしれません。

そんな時の為にonBeforeUnmountがあります。

使い方

凄くシンプルなコードで考えます。

<template>
  <p>このコンポーネントが消えると "bye!" と表示されます。</p>
</template>

<script setup>
import { onBeforeUnmount } from 'vue'

onBeforeUnmount(() => {
  console.log('bye!')
})
</script>

onBeforeUnmountを使う時は6行目の呼び出しをまずします。

9行目の部分に対象となるDOM(今回は2行目とします)を削除する前に行いたい処理を記述します。

これで2行目に何らかの処理をして削除された時はその前に9行目が動作します。