uniapp vue3 $on/$once/$off 的替代方案
2024-10-19 10:15:23
仅作参考 仅作参考 仅作参考 并且只支持页面生命周期使用 不支持组件 不支持页面函数方法 下面说了思路需要的话自己添加
今天用到 $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){
this._[cycle][0]=[]
}
this._[cycle][0] = function(){
callback()
return this._[cycle][0]===undefined?function(){}:this._[cycle][0]
}.bind(this)()
},
$on(cycle,callback,fnIndex){
this._[cycle].push(function(){
callback.__proto__.fnIndex=fnIndex
callback()
}.bind(this))
},
$off(fnIndex){
let num=0;
for (let item of this._[cycle]) {
if(item.__proto__.fnIndex===fnIndex){
item.splice(num,1)
return
}
num++
}
}
}
}
最新文章
- 实现UITextView的placeholder
- 使用git
- phoenix 开发API系列（三）phoenix api 结合数据库
- level分层次输出内容添加leve
- Navicat for MySQL数据库管理工具
- jquery下拉列表选中项改变时获取新选项的属性值
- Unity3d Shader开发（三）Pass（Blending ）
- 第六百二十一天 how can I 坚持
- 在自学java路上遇上的南墙
- Linux进阶命令用法
- #if 与 #ifdef 之间的区别
- windows端玩转docker笔记
- sql server 2016 附加 其它目录的数据库
- 任意两点间的最短路问题（Floyd-Warshall算法）
- 5、CentOS 6.5系统安装配置Nginx-1.2.7+PHP-5.3.22环境
- windows查询占用端口
- WPF命令（Command）介绍、命令和数据绑定集成应用
- 在MFC内竟然不可以解析“Mat”
- idea properties文件unicode码问题
- Python之logging日志模块