vue2封装hook函数,可以监听主页面生命周期

使用方法

const loader = delayedDisplayLoading('检查中...', 300, this);//第二个参数是this

const res = await checkSettingRule({ materialId: obj.id, deptId: this.currentDeptId }).finally(() => {

loader.hide();//ajax请求完成后务必清理

});

这里有疑问,那页面销毁呢,如何清理

这里就要用到vue2魔法啦,直接看函数实现

复制代码
// 延迟显示加载中弹窗,默认300毫秒
// vm: 可选参数,传入组件的 this,页面销毁时会自动调用 hide
export const delayedDisplayLoading = (msg = '加载中...', delay = 300, vm = null) => {
	uni.hideLoading();
	const timer = setTimeout(() => {
		uni.showLoading({
			title: msg,
			mask: true,
		});
	}, delay);

	const hide = () => {
		if (timer) {
			clearTimeout(timer);
		}
		uni.hideLoading();
		// 如果是手动调用的 hide,需要移除监听器,防止内存残留和重复执行
		if (vm && typeof vm.$off === 'function') {
			vm.$off('hook:beforeDestroy', hide);
		}
	};

	// 如果传入了 Vue 实例,利用 hook 机制自动绑定销毁事件
	if (vm && typeof vm.$once === 'function') {
		vm.$once('hook:beforeDestroy', hide);
	}
	return { hide };
};
相关推荐
kisshyshy1 分钟前
从Props透传到自定义Hook:系统梳理React跨层级通信与逻辑复用
前端·架构·代码规范
yume_sibai4 分钟前
05-Flutter实战项目
前端·flutter
涛涛ing21 分钟前
React 19.3 发布,但真正的赢家是 StyleX:当 AI 成为框架的“第一用户”
前端
zhangminghuan1 小时前
Vue vs React 实战拓展面试题|摒弃基础八股,聚焦业务开发核心难点(2026前端进阶)
前端
IT_陈寒1 小时前
Redis主从切换竟让业务卡了3秒?这个坑我替你踩了
前端·人工智能·后端
天若有情6731 小时前
独立开发复盘:我用 Node.js 做了个在线工具箱
前端·json·工具
xieliyu.1 小时前
前端基础:常见CSS选择器用法
前端·css·笔记·vscode
zttbee2 小时前
前端测试内容
前端
2603_965896622 小时前
async/await|JS同步写法解决异步终极方案
前端·javascript
A24207349304 小时前
TCP 三次握手与四次挥手:从原理到状态机一次讲清
前端