uni-app怎么解决Vue3版本下onLoad生命周期不执行的问题-uni-app-PHP中文网

onload不执行的根本原因是未通过@ dcloudio/uni-app导入并注册。必须import { onload }后在setup内调用，不可在组件中或setup外定义，且仅页面级有效。

uni-app怎么解决vue3版本下onload生命周期不执行的问题

直接说结论：onLoad 不执行，基本是因为你把它写成了普通函数，或者用在了错误的位置（比如组件里），而不是通过 @dcloudio/uni-app 提供的组合式 API 正确注册。

为什么 `onLoad` 在 `<script setup></script>` 里不执行

在 <script setup></script> 中直接声明 function onLoad() { ... }，UniApp 运行时根本不会识别——它不是 Vue 的钩子，也不是自动挂载的全局函数，必须显式导入并调用注册。

错误写法：function onLoad(query) { console.log(query) } → 完全静默，不触发
正确路径：必须从 @dcloudio/uni-app 导入 onLoad，并在 setup 内调用它传入回调
注意：不能在 setup 外部定义，也不能放在 methods 或 const 变量里

`onLoad` 必须用 `import { onLoad } from '@dcloudio/uni-app'`

这是唯一可靠的方式。Vue 3 的组合式 API 下，所有 UniApp 页面生命周期都得走这个包导出的函数注册，否则一律失效。

Vue-router参考手册

Vue-router参考手册下载

下载

示例代码：

import { onLoad, onReady } from '@dcloudio/uni-app'
import { ref } from 'vue'

export default {
  setup() {
    const data = ref(null)

    onLoad((query) => {
      console.log('收到页面参数', query)
      // 这里可以发起请求、赋值等
      data.value = query.id
    })

    onReady(() => {
      console.log('DOM 已就绪，可操作节点')
    })

    return { data }
  }
}

如果你用的是 TypeScript，确保 @dcloudio/uni-app 已安装且类型声明可用（npm install -D @types/uni-app）
不要混用 export default { onLoad() { ... } }（Options API 风格）和 <script setup></script>，会冲突