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 };
};
相关推荐
__log5 分钟前
AI前端工程化实战指南:10大核心场景的“解题思路“与“避坑指南“
前端·人工智能
ljt27249606616 分钟前
Vue笔记(一)--模板
前端·vue.js·笔记
广州华水科技7 分钟前
单北斗GNSS变形监测一体机在水库安全监测中的应用与优势
前端
光影少年9 分钟前
react的useRef 作用:获取DOM、保存可变数据、区别 createRef
前端·javascript·react.js
西洼工作室9 分钟前
前端Token失效检测与自动登出机制详解
前端
李剑一14 分钟前
华为二面稳了!面试官:请详细说明一下前端性能指标(FCP/LCP/CLS/TTI/TBT),如何采集、解读与优化?
前端·面试
KaMeidebaby6 小时前
卡梅德生物技术快报|骆驼纳米抗体:从原核表达、高通量测序到分子对接全流程实现
前端·数据库·其他·百度·新浪微博
子兮曰8 小时前
Node.js v26.1.0 深度解读:FFI、后量子密码与调试器的进化
前端·后端·node.js
测试员周周9 小时前
【Appium 系列】第06节-页面对象实现 — LoginPage 实战
开发语言·前端·人工智能·python·功能测试·appium·测试用例
西洼工作室10 小时前
前端直传OSS服务端签名(Policy+Signature)/STS临时凭证
前端·文件上传·oss