本記事ではVue 3のonMountedフックについて説明します。
目次
onMounted とは？
onMountedは、Vue 3のComposition APIで提供されるライフサイクルフックの1つであり、コンポーネントがマウントされた後に実行される関数を定義するために使用されます。このフックは、DOMがレンダリングされてから、コンポーネントで使用されるデータやメソッドが初期化された後に実行されます。
onMounted の使い方
以下は、onMountedフックの使用方法の例です。
<template>
<div>
<p>Mounted: {{ mounted }}</p>
</div>
</template>
<script>
import { ref, onMounted } from 'vue';
export default {
setup() {
const mounted = ref(false);
onMounted(() => {
mounted.value = true;
console.log('Component has been mounted!');
});
return {
mounted,
};
},
};
</script>この例では、mountedというBoolean型のリアクティブ変数を定義し、onMountedフック内でこの変数を変更しています。onMountedフック自体は、関数を引数として受け取り、コンポーネントがマウントされた後にこの関数を実行します。この例では、mounted変数をtrueに設定し、コンソールにメッセージを出力しています。
onMountedフックは、他のライフサイクルフックと同様に、複数回使用することができます。たとえば、以下の例では、onMountedフックを2回使用しています。
<template>
<div>
<p>Mounted: {{ mounted }}</p>
<p>Mounted again: {{ mountedAgain }}</p>
</div>
</template>
<script>
import { ref, onMounted } from 'vue';
export default {
setup() {
const mounted = ref(false);
const mountedAgain = ref(false);
onMounted(() => {
mounted.value = true;
console.log('Component has been mounted!');
});
onMounted(() => {
mountedAgain.value = true;
console.log('Component has been mounted again!');
});
return {
mounted,
mountedAgain,
};
},
};
</script>この例では、2つのリアクティブ変数mountedとmountedAgainを定義して、2つのonMountedフックを使用して、それぞれの変数を更新しています。
以上がonMountedフックの基本的な使い方になります。このフックを使用することで、コンポーネントの初期化後に必要な処理を実行することができます。