Vue.js3のonMountedフックについてのメモ
8 回閲覧されました
みなさんこんにちは、jonioです。
今回はonMountedフックについてのメモです。
onMountedとは
下記のコードで考えます。
<template>
<div>
<h1>こんにちは</h1>
</div>
</template>
<script>
import { onMounted } from 'vue';
export default {
setup() {
onMounted(() => {
console.log('コンポーネントが画面に表示されました！');
});
}
}
</script>onMountedフックを12行目〜14行目に記述していますが画面を表示した時にここに記述した内容（console.log）が1回だけ動作するのがonMountedフックです。
onMountedフックを使うには8行目の記述が必要になります。
少し応用した例
下記のコードで考えます。
<template>
<div>
<p>メッセージ: {{ message }}</p>
</div>
</template>
<script>
import { ref, onMounted } from 'vue';
export default {
setup() {
const message = ref('');
onMounted(() => {
message.value = 'こんにちは';
});
return {
message
};
}
}
</script>この記述をすると画面を表示した時に「こんにちは」が表示されています。
「ref」を使っているのでコードを変えると値の変更も可能になります。
refについては下記の記事をご覧下さい。
