小程序：小程序中的onLoad和onShow谁先执行-Toy模板网

这篇具有很好参考价值的文章主要介绍了小程序：小程序中的onLoad和onShow谁先执行。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

我们来做一下测试：

测试一

测试一我们直接执行

async onLoad (options) {
    console.log('执行onLoad')
},
async onShow () {
    console.log('执行onShow')
}

小程序：小程序中的onLoad和onShow谁先执行
发现确实是先执行的 onLoad 然后才是 onShow

测试二

测试二我们试试在 onLoad 中执行异步函数后，看看 onLoad 和 onShow 的执行顺序

const asyncFun = (time) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log('执行异步函数了')
      resolve()
    }, time)
  })
}

async onLoad (options) {
	await asyncFun(100)
    console.log('执行onLoad')
},
async onShow () {
    console.log('执行onShow')
}

这里就算把异步函数 asyncFun 的参数调为 0，依然是下面的结果
小程序：小程序中的onLoad和onShow谁先执行
我们再给测试二加点料，两个都执行异步函数，并且时间相同：

async onLoad (options) {
	await asyncFun(100)
    console.log('执行onLoad')
},
async onShow () {
	await asyncFun(100)
    console.log('执行onShow')
}

小程序：小程序中的onLoad和onShow谁先执行
再加点料

async onLoad (options) {
	await asyncFun(200)
    console.log('执行onLoad')
},
async onShow () {
	await asyncFun(100)
    console.log('执行onShow')
}

小程序：小程序中的onLoad和onShow谁先执行
说明虽然默认是先执行的 onLoad，但是如果有异步函数，那么就看哪个异步函数先执行完就先执行哪个。

测试三

如果 onLoad 中有个耗时比较长的同步函数，还是会等 onLoad 执行完再执行 onShow 吗？

const syncFun = (length) => {
  for (let i = 0; i < length; i++) {
    console.log('i：', i)
    if (i === length - 1) {
      console.log('循环结束')
    }
  }
  console.log('执行完成')
}

async onLoad (options) {
	syncFun(1000)
    console.log('执行onLoad')
},
async onShow () {
    console.log('执行onShow')
}