uni-app中App.vue的onLaunch函数和页面的onLoad函数异步问题的解决方案(Vue2/Vue3)
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
应用生命周期函数 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 个月前
更多推荐
已为社区贡献4条内容
所有评论(0)