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 };
};
相关推荐
我命由我123452 小时前
Vue Router - 记录一下 2 种路由写法
前端·javascript·vue.js·前端框架·html·html5·js
m0_719084112 小时前
导入导出—设备管理系统
前端·javascript·vue.js
周淳APP2 小时前
【计算机网络之XSS、CSRF、DDoS原理及防御措施】
前端·网络·计算机网络·http·ddos·xss·csrf
wuhen_n2 小时前
Vue Router 进阶:路由懒加载、导航守卫与元信息的高效运用
前端·javascript·vue.js
SoaringHeart2 小时前
Flutter进阶|源码修改:给 DecorationImage 源码添加偏移量
前端·flutter
wuhen_n2 小时前
虚拟列表完全指南:从原理到实战,轻松渲染10万条数据
前端·javascript·vue.js
兆子龙2 小时前
React Hooks 避坑指南:那些让你 debug 到凌晨的陷阱
前端·javascript
兆子龙3 小时前
你不会使用 CSS 函数 clamp()?那你太 low 了😀
前端·javascript
兆子龙3 小时前
前端性能优化终极清单:从 3 秒到 0.5 秒的实战经验
前端·javascript