应用生命周期函数 onLaunch 和页面生命周期函数 onLoad 存在同时执行的问题,而在实际开发中往往需要先执行 onLaunch 再执行 onLoad,为了让页面的 onLoad 在 onLaunch 之后执行,可以使用以下解决方案:

Vue2 中的解决方案

1 修改 main.js

Vue.prototype.$onLaunched = new Promise(resolve => {
    Vue.prototype.$isResolve = resolve
})

2 修改 App.vue

在 App.vue 的 onLaunch 所有业务逻辑执行完毕后增加代码 this.$isResolve()

onLaunch: function() {
	this.getConfig().then(res => {
	    // 业务逻辑执行完毕
    	this.$isResolve()
	})
},

或者

async onLaunch: function() {
	await this.getConfig()
	// 业务逻辑执行完毕
    this.$isResolve()
},

3 修改页面

在页面的 onLoad 中增加代码 await this.$onLaunched,注意onload要添加async

async onLoad(option) {
	//等待倒计时	
	await this.$onLaunched;
	// 后续业务逻辑
},

Vue3 的解决方案

// main.js
import App from './App'
import { createSSRApp } from 'vue'
export function createApp() {
  const app = createSSRApp(App)
  app.config.globalProperties.$onLaunched = new Promise(resolve => {
    app.config.globalProperties.$isResolve = resolve
  })
  return {
    app
  }
}
<script setup>
// App.vue
import { onLaunch } from '@dcloudio/uni-app'
import {getCurrentInstance} from 'vue'
const { proxy } = getCurrentInstance();
const {$isResolve} = proxy
onLaunch(() => {
    setTimeout(() => {
        $isResolve()
    }, 3000)
})
</script>
<script setup>
// page 页面中
import {getCurrentInstance} from 'vue'
const {proxy} = getCurrentInstance();
const {$onLaunched} = proxy
import {onLoad} from '@dcloudio/uni-app'
onLoad(async ()=>{
    // 等待倒计时
    await $onLaunched;
    // 后续业务逻辑
})
</script>
GitHub 加速计划 / vu / vue
207.54 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:2 个月前 )
73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 4 个月前
e428d891 Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐