Vue.js3超初心者向け。onUnmountedが何かと簡単なサンプルコードで解説

7 回閲覧されました
みなさんこんにちは、jonioです。
今回はonUnMountedが何かと使い方について簡単なサンプルコードで解説します。
Laravelの無料学習サイトを作りました
Laravelを勉強したい人向けの無料の学習サイトを作りました。
ここからリンクに飛べますのでぜひ利用してください。
OnUnmountedとは
コンポーネントが破棄されるタイミングで動作するライフサイクルです。
「コンポーネントが破棄されるタイミング」とは例えば親コンポーネントから子コンポーネントに遷移する時です。
親コンポーネントから子コンポーネントに遷移すると親コンポーネントが破棄されますよね。
もっと突っ込んで説明します。
常に使うとは限りません。
例えば子コンポーネントに遷移した時に親コンポーネントで常に動作しているメソッドがある場合はonUnmoutedでメソッドを止めないと読み込みが重くなって表示パフォーマンスが落ちます。
こんな時に使います。
具体的に簡単なサンプルコードを使って説明します。
サンプルコード
例えば親コンポーネントにメソッドに下記の記述があったとします。
<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>
18行目〜21行目の記述をすることで親コンポーネントが破棄された時の処理をすることができます。
とにかく18行目と21行目の間に処理を記述すればいいです。