可信赖的赣州网站建设,网站编程学习,专业seo关键词优化,蓝色科技企业网站模板Vue 中 onShow 与 onLoad 的执行时机解析
在 Vue.js#xff08;标准 Vue#xff09;和 Uniapp 框架 中#xff0c;生命周期钩子的执行机制存在差异#xff0c;特别是你提到的 onShow 和 onLoad#xff1a;
一、标准 Vue.js#xff08;浏览器环境#xff09;
1. 生命周…Vue 中 onShow 与 onLoad 的执行时机解析
在 Vue.js标准 Vue和 Uniapp 框架 中生命周期钩子的执行机制存在差异特别是你提到的 onShow 和 onLoad
一、标准 Vue.js浏览器环境
1. 生命周期钩子
标准 Vue 没有 onShow 和 onLoad 钩子与之对应的是
created实例初始化后mountedDOM 挂载完成后activated组件被 keep-alive 缓存并激活时updated数据更新导致 DOM 重新渲染后
2. 执行顺序
created - mounted - updated - destroyed二、Uniapp 框架小程序环境
1. 特有的生命周期钩子
Uniapp 为小程序环境扩展了原生生命周期钩子
onLoad页面加载时触发初次创建onShow页面显示时触发每次显示onReady页面初次渲染完成时触发onHide页面隐藏时触发onUnload页面卸载时触发
2. 执行顺序 首次进入页面 onLoad - onShow - onReady从其他页面返回当前页面 onShow页面隐藏跳转到其他页面 onHide页面卸载如使用 uni.navigateBack() onUnload三、关键区别
钩子标准 Vue.jsUniapp小程序onLoad无页面初次加载时触发onShow无页面每次显示时触发mountedDOM 挂载完成后触发类似 onReady
四、你的问题解答
1. onShow 可能在 onLoad 之后吗
是的每次页面加载时onLoad 总是先于 onShow 执行
export default {onLoad(options) {console.log(页面加载onLoad); // 先执行},onShow() {console.log(页面显示onShow); // 后执行}
}2. 常见场景
首次进入页面onLoad → onShow切换 TabBar 页面只触发 onShow页面已缓存不再触发 onLoad返回上一页只触发 onShow页面已缓存
五、使用建议
1. 数据获取
只需要加载一次的数据放在 onLoad 中每次显示都需要更新的数据放在 onShow 中
export default {onLoad() {// 初始化数据只执行一次this.fetchInitialData();},onShow() {// 刷新数据每次页面显示时执行this.refreshData();}
}2. 性能优化
避免在 onShow 中执行大量计算或频繁请求数据可结合 onLoad 和缓存机制
export default {data() {return {loaded: false,data: null}},onLoad() {if (!this.loaded) {this.fetchData();this.loaded true;}},onShow() {// 只在需要时刷新if (this.needRefresh) {this.refreshData();}}
}六、验证方法
在页面中添加日志
export default {onLoad(options) {console.log(onLoad 执行);},onShow() {console.log(onShow 执行);}
}观察控制台输出验证执行顺序 首次进入页面 onLoad 执行
onShow 执行从其他页面返回 onShow 执行总结
在 Uniapp 中onShow 总是在 onLoad 之后执行首次加载时但 onShow 会在每次页面显示时触发而 onLoad 仅在页面初次创建时触发一次。理解这一点对处理页面数据和交互至关重要。
