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)