uni-app+vue3+app createApp(App) App.vue中方法不执行

uni-app+vue3+app createApp(App) App.vue中方法不执行

开发环境 版本号 项目创建方式
Windows win10 HBuilderX 
产品分类：uniapp/App

PC开发环境操作系统：Windows

PC开发环境操作系统版本号：win10

HBuilderX类型：正式

HBuilderX版本号：3.8.12

手机系统：Android

手机系统版本号：Android 11

手机厂商：vivo

手机机型：vivo

页面类型：vue

vue版本：vue3

打包方式：云端

项目创建方式：HBuilderX

示例代码：

```main.js文件
```javascript
import {
createApp
} from "vue";
import App from "./App.vue";
const app = createApp(App);
app.mount('#app')

App.vue文件

<script>
export default {
name:'App',
onLaunch: function () {
console.log('App Launch')
},
onShow: function () {
console.log('App Show')
},
onHide: function () {
console.log('App Hide')
},
}
</script>

/*
每个页面公共css
*/

操作步骤：

```javascript
import {
createApp
} from "vue";
import App from "./App.vue";
const app = createApp(App);
app.mount('#app')

预期结果：

app+ App.vue文件
onLaunch、onShow、onHide方法正常执行；

实际结果：

app,   App.vue文件 onLaunch、onShow、onHide方法未执行；

bug描述：

问题： main.js 使用createApp(App).mount(’#app’)， App.vue文件 createApp(App).mount(’#app’) onLaunch、onShow、onHide方法没有只执行； main.js:改用createSSRApp，App.vue文件onLaunch、onShow、onHide才执行， 不是ssr 项目也需要使用createSSRApp吗


更多关于uni-app+vue3+app createApp(App) App.vue中方法不执行的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app+vue3+app createApp(App) App.vue中方法不执行的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在uni-app中使用Vue3时，App.vue的生命周期方法(onLaunch/onShow/onHide)需要通过特定的方式注册才能生效。这是因为uni-app的App生命周期与标准Vue3的生命周期不同。

解决方案：

  1. 修改main.js为：
import App from './App.vue'
import { createSSRApp } from 'vue'
export function createApp() {
  const app = createSSRApp(App)
  return {
    app
  }
}
  1. 或者在Vue3模式下，也可以使用组合式API：
import { onLaunch, onShow, onHide } from '[@dcloudio](/user/dcloudio)/uni-app'
export default {
  setup() {
    onLaunch(() => {
      console.log('App Launch')
    })
    onShow(() => {
      console.log('App Show')
    })
    onHide(() => {
      console.log('App Hide')
    })
  }
}
回到顶部