134 回閲覧されました

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

今回はonUnMountedが何かと使い方について簡単なサンプルコードで解説します。

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

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

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

OnUnmountedとは

コンポーネントが破棄されるタイミングで動作するライフサイクルです。

「コンポーネントが破棄されるタイミング」とは例えば親コンポーネントから子コンポーネントに遷移する時です。

親コンポーネントから子コンポーネントに遷移すると親コンポーネントが破棄されますよね。

もっと突っ込んで説明します。

常に使うとは限りません。

例えば子コンポーネントに遷移した時に親コンポーネントで常に動作しているメソッドがある場合はonUnmoutedでメソッドを止めないと読み込みが重くなって表示パフォーマンスが落ちます。

こんな時に使います。

具体的に簡単なサンプルコードを使って説明します。

サンプルコード

例えば親コンポーネントにメソッドに下記の記述があったとします。

<script setup>
import { onMounted } from 'vue';

let intervalId;

const log = () => {
  intervalId = setInterval(() => {
    console.log('タイマー実行中');
  }, 1000);
};

onMounted(() => {
  log();
});

</script>

<script setup>
import { onMounted } from 'vue';

let intervalId;

const log = () => {
  intervalId = setInterval(() => {
    console.log('タイマー実行中');
  }, 1000);
};

onMounted(() => {
  log();
});

</script>

このコードでlogメソッドが1秒ごとに動作しますがこの状態で子コンポーネントに遷移すると「console.log」が動作し続けます。

だからif文で「子コンポーネントに遷移した時」の条件をつけてメソッドの処理を止めます。

下記の記述をします。

<script setup>
import { onMounted, onUnmounted } from 'vue';

let intervalId;

const log = () => {
  intervalId = setInterval(() => {
    console.log('タイマー実行中');
  }, 1000);
};

onMounted(() => {
  log();
});


//ここから追加
onUnmounted(() => {
    clearInterval(intervalId);
    console.log('タイマー解除');
});
//ここまで追加
</script>

<script setup>
import { onMounted, onUnmounted } from 'vue';

let intervalId;

const log = () => {
  intervalId = setInterval(() => {
    console.log('タイマー実行中');
  }, 1000);
};

onMounted(() => {
  log();
});


//ここから追加
onUnmounted(() => {
    clearInterval(intervalId);
    console.log('タイマー解除');
});
//ここまで追加
</script>

18行目〜21行目の記述をすることで親コンポーネントが破棄された時の処理をすることができます。

とにかく18行目と21行目の間に処理を記述すればいいです。