How do I refactor this:
watch: {
count: {
handler (v) {
if (v) this.intervalId = setInterval(() => { this.now++ }, 1000)
else clearInterval(this.intervalId)
},
immediate: true
}
}
Into Composition API?
I tried something like that, which throws errors:
watch(()=> {
count.value,
handler (value) {
if (value)
intervalId.value = setInterval(() => {
now.value++;
}, 1000);
else clearInterval(intervalId.value);
},
immediate: true
})
You can refactor it as below. You can pass immediate option to the watch method as the 3rd parameter in Vue 3
const app = Vue.createApp({
setup() {
const count = Vue.ref(0);
const now = Vue.ref(0);
const intervalId = Vue.ref(0);
Vue.watch(count, (currentValue, oldValue) => {
if (currentValue) intervalId.value = setInterval(() => now.value++, 1000);
}, {
immediate: true
});
Vue.onUnmounted(() => { clearInterval(intervalId.value) });
return {
count,
now
};
}
}).mount('#app');<script src="https://unpkg.com/vue@next"></script>
<div id="app">
{{ count }} - {{ now }}
<button @click="count++">Increment</button>
<button @click="count=0">reset</button>
</div>P.S: You can use import {watch, ref, onUnmounted} from "vue" to make the code cleaner.