Vue3实例创建未挂载 created/mounted生命周期钩子不触发问题

安全阿岳

2026-8-29

问题根因与修复方案

核心触发原因

Vue3实例创建后未完成挂载、生命周期不触发，基本由以下两个高频问题导致：

脚本执行时机早于DOM渲染：执行app.mount('#app')时，页面中还未渲染出id为app的DOM节点，Vue找不到挂载目标，不会进入组件初始化流程
Options API写法错误：Vue3中data选项必须为返回数据对象的函数，直接写普通对象是Vue2的旧写法，会导致组件初始化异常

分步修复操作

保证挂载逻辑执行时DOM已就绪
二选一即可：
- 把编译后的JS脚本引入标签放到页面</body>标签前，确保脚本执行时#app节点已经存在
- 给挂载逻辑加DOM加载完成监听，代码如下：
```
// 原有createApp逻辑不变
document.addEventListener('DOMContentLoaded', () => {
    app.mount('#app')
})
```

修正data选项写法
把传入createApp的配置里的data改成函数形式，返回初始数据对象：

const app = createApp({
    data() {
        return {
            width: 90,
            height: 210,
        }
    },
    mounted() {
        console.log('mounted');
    },
    created() {
        console.log('created');
    }
});

修正laravel-mix的Vue别名配置（前两步完成后仍异常时操作）
打开项目根目录的webpack.mix.js，添加webpack别名配置，避免打包时引入错误的Vue构建版本：

const mix = require('laravel-mix');

mix.js('resources/js/你的入口文件路径.js', 'public/js')
     .webpackConfig({
          resolve: {
              alias: {
                  vue: 'vue/dist/vue.esm-bundler.js'
              }
          }
      })
     // 保留你原有的其他mix配置，比如vue()、sass处理等