uni-app vue3项目 h5 全局混入页面生命周期onLoad执行时机异常

发布于 1周前 作者 sinazl 来自 Uni-App

uni-app vue3项目 h5 全局混入页面生命周期onLoad执行时机异常

开发环境 版本号 项目创建方式
Windows win10 HBuilderX

产品分类：uniapp/App

PC开发环境操作系统：Windows

HBuilderX类型：正式

HBuilderX版本号：4.36

手机系统：Android

手机系统版本号：Android 15

手机厂商：华为

手机机型：mate20X

页面类型：vue

vue版本：vue3

打包方式：云端

操作步骤：

main页面
import App from './App';

//#ifndef VUE3
import Vue from 'vue';
import './uni.promisify.adaptor';
Vue.config.productionTip = false;
App.mpType = 'app';
const app = new Vue({
...App
});
app.$mount();
//#endif

//#ifdef VUE3  
let mixin = {
onLoad(options) {
console.log('=== vue3 mixin onload');
}
};
import { createSSRApp } from 'vue';
export function createApp() {
const app = createSSRApp(App);
app.mixin(mixin);
return {
app
};
}
//#endif

index.vue页面
<template>
<view class="content"></view>
</template>
<script setup>
import { onLoad } from '@dcloudio/uni-app';
onLoad(() => {
console.log('=== 组合式api onLoad');
});
</script>
<script>
export default {
onLoad() {
console.log('=== 选项式api onLoad');
}
};
</script>

预期结果：

=== vue3 mixin onload
=== 组合式api onLoad
=== 选项式api onLoad

实际结果：

=== 组合式api onLoad
=== vue3 mixin onload
=== 选项式api onLoad

bug描述：

vue3 h5项目，全局混入onLoad，正确的执行顺序应该是先执行混入的onLoad方法，再执行页面的onLoad方法，但是结果正好相反。

进一步测试发现，只有组合式api写法，onLoad执行时机异常，选项式api写法没问题。
我在同一个页面，同时使用了两种写法，打印结果如下：

Harmonyos Next教程
10 回复

生命周期就是组合是api最先执行


你的截图表示setup最先触发，不代表setup中的onLoad等其他生命周期最先触发。另外和我的问题无关。

无论是选项式还是组合式，混入中的onLoad都应该在他们前面触发，否则混入中的onLoad根本毫无意义。

你反馈 onload 生命周期不一样，其他生命周期是否正常，比如 mounted，create，是都有问题，还是只有 onload 有问题，缩小下问题反馈

回复图片看楼下 排查了onLoad、onShow、mounted、created，组合式api没有created周期，打印日志如图，生命周期极其混乱，其中mixin created打印了9次、mixin onShow打印了两次，=== mixin mounted打印了9次

进一步测试，从上一个页面通过navigateBack回来，onShow触发顺序也有问题，顺序如下

=== 组合式api onShow === vue3 mixin onShow === 选项式api onShow

排查了onLoad、onShow、mounted、created，组合式api没有created周期，打印日志如图，生命周期极其混乱，其中mixin created打印了9次、mixin onShow打印了两次，=== mixin mounted打印了9次



进一步测试，从上一个页面通过navigateBack回来，onShow触发顺序也有问题，顺序如下
=== 组合式api onShow === vue3 mixin onShow === 选项式api onShow

在uni-app中使用Vue 3时，全局混入页面生命周期onLoad的执行时机异常通常与生命周期钩子函数的注册和处理方式有关。以下是一个简化的代码示例，展示如何在uni-app的Vue 3项目中正确地全局混入页面生命周期，并处理可能导致的执行时机问题。

首先，确保你的uni-app项目已经正确配置为使用Vue 3。然后，你可以通过创建一个混入（mixin）文件来定义全局的生命周期钩子。

1. 创建混入文件 globalMixin.js

// globalMixin.js
export const globalMixin = {
  mounted() {
    console.log('Global Mixin - mounted');
  },
  onLoad() {
    console.log('Global Mixin - onLoad');
    // 在这里添加你需要在所有页面onLoad时执行的代码
  },
  // 可以根据需要添加其他生命周期钩子
};

2. 在项目的入口文件（通常是 main.js 或 main.ts）中引入并使用这个混入

// main.js 或 main.ts
import { createApp } from 'vue';
import App from './App.vue';
import { globalMixin } from './path/to/globalMixin'; // 根据实际路径调整

const app = createApp(App);

// 使用全局混入
app.mixin(globalMixin);

app.mount('#app');

3. 注意事项

  • 执行顺序：全局混入的生命周期钩子会在每个组件的相应生命周期钩子之前执行。如果组件内部也定义了onLoad，那么组件的onLoad会在全局混入的onLoad之后执行。
  • 避免冲突：在全局混入中定义的逻辑应该尽量保持通用，避免与页面或组件的特定逻辑产生冲突。
  • 调试：如果执行时机仍然异常，可以通过在控制台打印日志或使用断点调试来跟踪生命周期钩子的执行顺序和上下文。

4. 示例页面组件

<template>
  <div>Page Content</div>
</template>

<script>
export default {
  onLoad() {
    console.log('Page Component - onLoad');
    // 页面特定的onLoad逻辑
  },
};
</script>

在上述示例中，当你访问该页面时，控制台应该首先打印出“Global Mixin - onLoad”，然后打印出“Page Component - onLoad”，表明全局混入和页面组件的生命周期钩子按预期顺序执行。

如果仍然遇到执行时机异常的问题，请检查是否有其他全局配置或插件影响了生命周期钩子的执行。

回到顶部