一、$once的概述使用
- $once是一个函数,可以为Vue组件实例绑定一个自定义事件,但该事件只能被触发一次,触发之后随即被移除。
- $once有两个参数,第一个参数为字符串类型,用来指定绑定的事件名称,第二个参数设置事件的回调函数。
- $once可以多次为同一个事件绑定多个回调,触发时,回调函数按照绑定顺序依次执行。
- 还可以作为修饰符使用
1.$once的简单使用+绑定多个回调
<template>
<div>
<button @click="$emit('clickHander')">按钮</button>
</div>
</template>
<script>
export default {
mounted() {
this.$once('clickHander', () => {
console.log('第一次:该事件只能够被触发一次,触发后立刻被移除');
});
this.$once('clickHander', () => {
console.log('第二次:该事件只能够被触发一次,触发后立刻被移除');
});
}
}
</script>
使用方法就是如下, 他们配合使用,可以重复写多个
@click="$emit('clickHander')"
this.$once('clickHander',()=>{})
this.$once('clickHander',()=>{})
2.once作为修饰符
<template>
<div>
<button @click.once="clickHander">按钮</button>
</div>
</template>
<script>
export default {
methods:{
clickHander(){
//同样也会触发一次哈
console.log("XXXX")
}
},
}
</script>
// clickHander事件只会被触发一次.
二、使用$once清除定时器(方案二)
方案一:
.以外在没接触$once前我是在data里定义个全局的定时器名字,在方法(methods)或者页面初始化(mounted())的时候使用定时器,在页面销毁的生命周期函数(beforeDestroy())中销毁定时器,具体使用如下:
1.在data里定义
export default{
data(){
timer:null
}
}
2.在方法(methods)的时候使用定时器
methods: {
setTimeData() {
this.timer = setInterval(()=>{
// to do
},1000);
}
}
3.然后在页面销毁的生命周期函数(beforeDestroy())中销毁
beforeDestroy(){
clearInterval(this.timer);
this.timer = null;
}
这是最基本的清除定时器的方法,但是创建的定时器代码和销毁定时器的代码没有放在一起,通常很容易忘记去清理这个定时器,不容易维护。所以才看到可以使用$once方案更优雅的解决。
方案二:
export default{
methods:{
setTimeData(){
let timer = setInterval(()=>{
// to do
console.log("定时器打印111");
},1000);
this.$once('hook:beforeDestroy',()=>{
clearInterval(timer);
timer = null;
})
}
}
}
在任意地方用 this.
o
n
/
on/
on/once(‘hook:生命周期’,callback),就可以监听到生命周期的变化了
这样使用和清除就写在一起,不用定义多余的变量,感觉代码更优雅了。