Vue中$once搭配生命周期使用，例如hook:beforeDestroy

LangForOne

已于 2022-12-20 16:21:19 修改

阅读量2.3k

点赞数 1

分类专栏： vue 文章标签： 1024程序员节

于 2022-10-24 23:26:18 首次发布

本文链接：https://blog.csdn.net/vvv3171071/article/details/127504663

版权

vue 专栏收录该内容

41 篇文章

订阅专栏

本文介绍了Vue组件的$once方法，它用于一次性绑定事件，触发后自动移除。$once接受两个参数，事件名和回调函数，可用于清理定时器。示例展示了在beforeDestroy生命周期钩子中使用$once清除定时器，使代码更优雅。此外，还提及了$once作为修饰符的使用方式，以及如何监听Vue组件的生命周期变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

once的概述如下：

$once是一个函数，可以为Vue组件实例绑定一个自定义事件，但该事件只能被触发一次，触发之后随即被移除。
$once有两个参数，第一个参数为字符串类型，用来指定绑定的事件名称，第二个参数设置事件的回调函数。
$once可以多次为同一个事件绑定多个回调，触发时，回调函数按照绑定顺序依次执行。
还可以作为修饰符使用

once搭配hook勾子使用：

export default{
  methods:{
    setTimeData(){
      let timer = setInterval(()=>{
      	// to do
         console.log("定时器打印111");
      },1000);
      this.$once('hook:beforeDestroy',()=>{
        clearInterval(timer);
        timer = null;
      })
    }
  }
}