🔄 4-1. クラスの mounted, created など → Composition API の onMounted など

✅ 要点まとめ

• クラスコンポーネントのライフサイクルフックは created(), mounted(), destroyed() など
• Composition API では onMounted, onBeforeMount, onUnmounted などの関数を使う
• 名前と使い方が変わる → 自動実行されないので、自分で関数の中に処理を書く。

🟢 変換パターン（具体例）

【クラスコンポーネント】

// ファイル名: MyComponent.vue (クラス版)
@Component
export default class MyComponent extends Vue {
  // created フック
  created() {
    console.log('created!');
  }

  // mounted フック
  mounted() {
    console.log('mounted!');
  }

  // destroyed フック
  destroyed() {
    console.log('destroyed!');
  }
}

【Composition API (<script setup> 版)】

<!-- ファイル名: MyComponent.vue -->
<script setup lang="ts">
// ライフサイクルフックをインポート
import { onMounted, onBeforeMount, onUnmounted } from 'vue';

// created 相当（onBeforeMount が近い）
onBeforeMount(() => {
  console.log('created!');
});

// mounted
onMounted(() => {
  console.log('mounted!');
});

// destroyed → onUnmounted
onUnmounted(() => {
  console.log('destroyed!');
});
</script>

🟡 変換表（まとめ）

🟣 よくある注意点

• this が使えない！

  → 必ず ref などの変数で管理する必要あり。

• onMounted の中で ref.value を触る → OK。

• ライフサイクル関数は setup の中（<script setup> ならそのまま）でしか使えない。