Vue组合式API中onMounted生命周期回调未触发问题排查

你的代码存在两个核心问题，导致onMounted的日志无法正常输出：

1. 组合式API的生命周期钩子（如onMounted）必须在组件的setup上下文中调用，你现在将其放在全局作用域，Vue无法将钩子与对应组件实例关联。
2. 代码同时混用了选项式组件导出和createApp创建新实例的写法，逻辑混乱；且HelloWorld.vue中重复定义了id="app"容器，会与根实例挂载的容器冲突。

修复后的App.vue（推荐使用<script setup>，更贴合组合式API习惯） #

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js App" />
</template>

<script setup>
import HelloWorld from './components/HelloWorld.vue'
import { onMounted } from 'vue'

// 组合式API钩子必须放在setup上下文内（<script setup>自动创建了setup环境）
onMounted(() => {
    console.log("onMounted");
})
</script>

若习惯使用选项式的setup选项，也可按以下方式修改：

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js App" />
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
import { onMounted } from 'vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  },
  setup() {
    // 钩子必须在setup函数内部调用
    onMounted(() => {
        console.log("onMounted");
    })
  }
}
</script>

修复后的HelloWorld.vue #

删除重复的id="app"容器，避免与根实例挂载冲突：

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
  <button @click="count++">
    Count is: {{ count }}
  </button>
</template>

<script setup>
import { ref } from 'vue'

// 组合式API中用ref定义响应式变量
const count = ref(0)

// 声明接收的props
defineProps({
  msg: String
})
</script>

关键注意点 #

• 组合式API的所有钩子函数（onMounted、onUpdated等）必须在组件的setup函数（或<script setup>语法糖）内部调用，才能让Vue将钩子与当前组件实例绑定。
• 不要同时用export default导出组件又用createApp创建新实例，这会生成两个独立的Vue实例，造成逻辑混乱。
• 根实例挂载的#app容器必须唯一，子组件中不要重复定义相同id的元素。

内容的提问来源于stack exchange，提问作者Amrmsmb