【填坑排错系列_uniapp篇】uniapp与vue中的生命周期函数

最新推荐文章于 2025-04-28 10:44:45 发布

JC-Ge

最新推荐文章于 2025-04-28 10:44:45 发布

阅读量3.7k

点赞数

CC 4.0 BY-SA版权

分类专栏： uniapp 文章标签： uniapp vue js 生命周期函数

本文链接：https://blog.csdn.net/qq_38868135/article/details/98748534

本文探讨了在uniapp中vue的生命周期函数的使用情况，通过一个实际的调试示例，揭示了onLoad、onShow、onReady、onHide、onUnload等uniapp生命周期函数与vue的beforeCreate、created、beforeMount、mounted等生命周期之间的执行顺序。测试结果显示，某些函数如onLoad在特定场景下可能不会立即执行，而在onShow或mounted中才会生效。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue的所有生命周期函数在uniapp中都可以使用

最近在调试基于uniapp开发的应用，发现一段请求js文件的代码在onLoad中没有反应，但在onShow、mounted等生命周期中有反应，所以写了个demo了解一下vue部分和uniapp页面部分生命周期函数的执行顺序，测试结果如下：

测试包含的uniapp生命周期函数：onLoad onShow onReady onHide onUnload
测试包含的vue生命周期函数：beforeCreate created beforeMount mounted

chrome控制台输出

下面时测试用的生命周期函数代码：

onLoad() {
		console.log('onLoad');  // 页面加载
		uni.request({
			url: 'https://gitee.com/api/v5/repos/jc-ge/test/contents/freshData.js',
			method: 'GET',
			success: res => {console.log('success');},
			fail: () => {console.log('fail');},
			complete: () => {console.log('complete');}
		});
	},
	onShow() {
		console.log('onShow');  // 页面显示
	},
	onReady() {
		console.log(&#

最低0.47元/天解锁文章