在Vue中点击清除SetInterval是常见的需求之一。本文将介绍如何在Vue中进行这个操作。
一、使用setInterval和clearInterval
在Vue中，使用setInterval和clearInterval可以实现对计时器的操作。
setInterval(function() {
// do something
}, 1000);
clearInterval(intervalId);
可以通过设置intervalId来清除计时器。
二、使用Vue的计时器
Vue提供了计时器组件来实现类似于setInterval和clearInterval的功能。可以使用Vue的计时器组件来实现点击清除计时器的操作。
// 计时器的组件
<template>
<div>
<p>{{ time }}</p>
<button @click="start"></button>
<button @click="stop"></button>
</div>
</template>
<script>
export default {
data() {
return {
time: 0,
timer: null
};
},
methods: {
start() {
this.timer = setInterval(() => {
this.time++;
}, 1000);
},
stop() {
clearInterval(this.timer);
}
}
};
</script>
在Vue的计时器组件中，通过设置timer来清除计时器。
三、使用Mixin
可以使用Mixin来实现对计时器的操作，这样可以减少代码的重复性。
首先，创建一个Mixin：
export default {
data() {
return {
intervalId: null
};
},
methods: {
startInterval(func, time) {
this.intervalId = setInterval(() => {
func();
}, time);
},
endInterval() {
clearInterval(this.intervalId);
}
}
};
然后，在Vue的组件中使用该Mixin：
<template>
<div>
<p>{{ time }}</p>
<button @click="start"></button>
<button @click="stop"></button>
</div>
</template>
<script>
import intervalMixin from './intervalMixin';
export default {
mixins: [intervalMixin],
data() {
return {
time: 0
};
},
methods: {
start() {
this.startInterval(() => {
this.time++;
}, 1000);
},
stop() {
this.endInterval();
}
}
};
</script>
使用Mixin可以提高代码的复用率，使得代码更易于维护。
四、使用Vue Composition API
Vue 3提供了Composition API，可以将代码分为多个逻辑组件，从而使代码更易于维护。下面是使用Composition API实现计时器的代码：
<template>
<div>
<p>{{ time }}</p>
<button @click="start"></button>
<button @click="stop"></button>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const time = ref(0);
let intervalId = null;
const startInterval = (func, time) => {
intervalId = setInterval(() => {
func();
}, time);
};
const endInterval = () => {
clearInterval(intervalId);
};
const start = () => {
startInterval(() => {
time.value++;
}, 1000);
};
const stop = () => {
endInterval();
};
return {
time,
start,
stop
};
}
};
</script>
使用Composition API可以更加清晰和易于维护，同时也提高了代码的效率。
原创文章，作者：JENEN，如若转载，请注明出处：https://www.506064.com/n/373567.html
微信扫一扫 
支付宝扫一扫 