vue v-once,vue $once hook
$once是一个可以为Vue组件的实例绑定自定义事件的函数，但是事件只能被触发一次，然后被移除。下面文章主要介绍两个关于Vue中$once的实用小技巧，有需要的朋友可以参考一下。
目录
前言清除计时器$once/$emit async/await以实现对话的同步执行摘要
前言
在Vue中，有很多API是非常实用的，只需要探索一下适用的场景。下面是$once的两个小技巧，也是日常工作中常用的。希望能对你有所帮助。
清除定时器
每个人都应该使用很多计时器，就像我通常在开始时做的那样，在created中创建计时器，在beforeDestroy中销毁计时器。
脚本
导出默认值{
名称：计时器，
data() {
返回{
计时器：空，
计数：0，
};
},
已创建(){
this.timer=setInterval(()={
this.count
}, 1000);
},
销毁前(){
clear interval(this . timer)；
},
};
/脚本
一开始没发现什么问题，没毛病。
我学的比较慢，才发现这里面确实有几个问题：
定时器是在两个生命周期中创建和销毁的，所以在beforeDestroy中很容易忘记销毁，导致不必要的内存消耗和可读性差，给后续维护带来困难。如果定时器在同一个生命周期内被创建和销毁，那么定时器实际上不需要使用响应公式，可以减少性能的浪费。只需在created中定义一个变量。当你想销毁的时候，你只需要清空定时器，但是你不会把定时器重置为空。用完复位是个好习惯(定时器返回的值可以理解为这个定时器的ID，通过它你可以销毁这个定时器)。优化后的版本是这样的，可读性强很多，有点像composition API:)。例子可以戳这里。
导出默认值{
姓名： OnceTimer ，
data() {
返回{
计数：0，
};
},
已创建(){
设timer=setInterval(()={
this.count
}, 1000);
这个。$once(hook:beforeDestroy ，()={
clearInterval(定时器)；
timer=null
});
},
};
$once/$emit + async/await 实现 Dialog 同步执行
背景如下：全球有一个配置项showDialog。当点击查询时，如果这个配置项为真，则需要一个对话框供用户填写一些数据。关闭此对话框后，您可以向后端发送确认界面。如果配置项为假，可以直接发送确认请求。
这里会有两个问题：
这个项目符号框和确认操作没有很强的关联，我不能把确认请求逻辑放在对话框项目符号框里；当控制弹框显示的变量visible设置为true时，js逻辑会继续向下执行，即执行完confirm的请求逻辑后，发出请求，这不是我想要的结果。我们来模拟一下这个过程，如下图所示：
点击查询后，首先输出表单submit(用来模拟点击查询后的请求)，然后点击对话框后输出对话框confirm。你可以看到你点击查询的界面先发出，你点击对话框确认的界面发出。
要解决这个问题，我们可以从以下两个方面着手：
Dialog的确认逻辑要和confirm的发送请求逻辑解耦，不能写在一起，不利于重用confirm的发送请求逻辑。对话框关闭后才能执行，所以我们需要知道对话框什么时候关闭。有了这两点，就可以想到用$once/$emit promise async/await来实现这个逻辑。
通过$once/$emit进行通信，告诉对话框关闭，通过promise async/await将逻辑从异步改为同步。
我们来看看具体的代码：
//对话框组件
模板
el对话
Title=提示
:visible.sync=dialogVisible
宽度=30%
：之前-关闭=关闭
跨度这是一段信息/span
span slot=页脚 class=对话框-页脚
el-button @click=关闭取消/el-button
El-button type= primary @ click= confirm 确定/el-button
/span
/el-dialog
/模板
脚本
导出默认值{
道具：[dialogVisible]，
data() {
return { }；
},
方法：{
close() {
这个. emit( before-dialog-close )；
这个. emit(update:dialogVisible ，false)；
},
确认(){
console.log("对话框确认");
这个。close()；
},
},
};
/脚本
模板
差异
El-form:inline= true :model= form inline class= demo-form-inline
El-表单-项目标签=审批人
El-最小线的输入v-model=。用户“placeholder=”审批人/el-input
/El-表单-项目
El-表单-项目标签=活动区域
El-选择最小线的v-model=。区域 placeholder=活动区域
埃尔选项标签=区域一值=上海/el选项
埃尔选项标签=区域二值=北京/el选项
/el-select
/El-表单-项目
埃尔-表单-项目
El-button type= primary @ click= on submit 查询/el-button
/El-表单-项目
/el格式
对话
:dialogVisible.sync=visible
@before-dialog-close=()=this .$emit(beforeDialogClose )
/
/div
/模板
脚本
从导入对话框./dialog ；
导出默认值{
姓名：承诺，
组件：{
对话，
},
data() {
返回{
对于在线：{
用户： ,
区域： ,
},
//控制对话的展示
可见：假，
//在业务中这是一个配置项
showDialog: true，
};
},
方法：{
awaitDialogClose() {
返回新承诺((解决)={
如果(!this.visible) {
解决(空);
}
这个$once(beforeDialogClose ，()={
解决(空);
});
});
},
异步onSubmit() {
if (this.showDialog) {
this.visible=true
}
等等这个。awaitdialogclose()；
setTimeout(()={
console.log(表单提交!);
}, 1000);
},
},
};
/脚本
效果如下：
在点击查询之后，我刻意的停留的一下，就是为了显示点击dialog确认的逻辑在点击查询的请发逻辑之前执行。
详细代码具体分析，可以看到主要的逻辑就是在对话关闭之前，$emit出一个事件，来告诉父组件，对话框要关闭了。
//对话框组件
close() {
//通知父组件对话要关闭了
这个. emit( before-dialog-close )；
//关闭对话
这个. emit(update:dialogVisible ，false)；
},
在父组件中，创建一个承诺，通过$一次来等到对话关闭的信号。
//发出信号
对话
:dialogVisible.sync=visible
@before-dialog-close=()=this .$emit(beforeDialogClose )
/
//接收信号
awaitDialogClose() {
返回新承诺((解决)={
//当对话没弹框的时候，走这个逻辑，承诺直接结束
如果(!this.visible) {
解决(空);
}
//当对话要关闭的时候，$一次接收到了信号，承诺结束
这个$once(beforeDialogClose ，()={
解决(空);
});
});
},
在确认的点击逻辑中，用一个等待来保证普姆西结束后，才往下继续执行。
异步onSubmit() {
//当配置为真实的时，需要对话弹框
if (this.showDialog) {
this.visible=true
}
//承诺结束后，才会继续往下执行，否则就一直等待
等等这个。awaitdialogclose()；
setTimeout(()={
console.log(表单提交!);
}, 1000);
},
至此，功能就完成了，这个功能适用场景还是很广的（我也是请教了大佬才学会的),大家有兴趣的也可以挖掘一些其他的使用场景。具体代码在这里，有兴趣的可以看一看呀。
可是在Vue3中，$一次被移除了，不过没关系，Vue官方也提出了可以替代的方法。
事件总线模式可以由实现事件触发接口的外部库来代替，比如mitt或tiny-emitter。
从“微型发射器/实例”导入发射器
导出默认值{
$once:(.args)=gt；发射器. once(.args)，
$emit:(.args)=gt；发射器.发射器(.args)，
}
复制代码
总结
没有无用的API，只是没有适用的场景。如果你有更好的解决方法，也可以在评论区告诉我，让我学习。
这就是这篇关于Vue中$once的实用技巧的文章。更多Vue$once的相关提示，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。