uniapp vue3 $on/$once/$off 的替代方案

仅作参考 仅作参考 仅作参考 并且只支持页面生命周期使用 不支持组件 不支持页面函数方法 下面说了思路需要的话自己添加

今天用到 $once 时发现报错了，原来是vue3移除了该api。我一开始想的是 自己注册全局方法 如下

app.config.globalProperties.$once = function(cycle, callback) {
	let flag = true;
	app.mixin({
		[cycle]() {
			if (flag) {
				flag - false
				callback()
			}
		}
	})
}

但是发现我这样是全局注入，我想要的是局部单页面，并且我没办法删除注册后的方法，通过flag的话也不规范。

然后我就在页面中输出this，发现对象上没有周期函数，***，最后竟在this._上获取到了，不过我又发现为什么是数组，恰饭的时候想起来mixins混入，可能是让开发者清楚自己混入了多少文件吧，ok 经历说过了 下面放代码：

### main.js

import $mixins from './common/mixins.js'

***
app.mixin($mixins)

### mixins.js

export default{
	methods: {
		$once(cycle,callback){
			if(this._[cycle]===undefined){
				console.error('请注册---'+cycle+'周期函数')
				return
			}
			const callback1 = function(){
				this.$off(cycle,'$onlyOnce')
				return callback()
			}.bind(this)
			this.$on(cycle,callback1,'$onlyOnce')
		},
		$on(cycle,callback,fnIndex){
			if(this._[cycle]===undefined){
				console.error('请注册---'+cycle+'周期函数')
				return
			}
			callback = function(){
				return callback
			}()
			callback.fnIndex=fnIndex;
			this._[cycle].push(callback)
		},
		$off(cycle,fnIndex){
			if(this._[cycle]===undefined){
				console.error('请注册---'+cycle+'周期函数')
				return
			}
			let num=0,ary=[];
			for (let item of this._[cycle]) {
				if(item.fnIndex===fnIndex){
					ary.push(num)
					continue
				}
				num++
			}
			for (let i of ary) {
				this._[cycle].splice(i,1)
			}
		}
	}
}

使用
this.$on('onShow',()=>{
	console.log(this.fixedTop)
},'索引用来删除')
this.$off('onShow','需要删除的索引')

this.$once('onShow',callback)