🔄 8-3. ライフサイクル関連の落とし穴

✅ 要点まとめ

• Composition API のライフサイクルは onMounted, onUnmounted など関数呼び出し型
• this がないので、this.count みたいな書き方はNG
• 関数の外に変数がある → ref, reactive, computed を使う
• setup() の中、または <script setup> の中 でしかライフサイクルフックは使えない
• async/await とライフサイクルの組み合わせ にも注意。

🟥 よくある落とし穴とエラー例

① onMounted を setup の外で書いてしまう

// ❌ エラーになる
onMounted(() => {
  console.log('mounted!');
});

✅ 解決：必ず setup の中（または <script setup>）で書く！

<script setup lang="ts">
import { onMounted } from 'vue';

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

② this を使おうとしてしまう（クラス脳のクセ）

// ❌ this.count は存在しない
onMounted(() => {
  this.count++; // ❌ エラー
});

✅ ref を使う！

const count = ref(0);

onMounted(() => {
  count.value++; // ✅
});

③ async なライフサイクルで Promise をちゃんと待たない