¿Cómo refactorizo esto?
watch: { count: { handler (v) { if (v) this.intervalId = setInterval(() => { this.now++ }, 1000) else clearInterval(this.intervalId) }, immediate: true } }¿En la API de composición?
Intenté algo así, que arroja errores:
watch(()=> { count.value, handler (value) { if (value) intervalId.value = setInterval(() => { now.value++; }, 1000); else clearInterval(intervalId.value); }, immediate: true })Puede refactorizarlo como se muestra a continuación. Puede pasar la opción immediate al método de watch como tercer parámetro en 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> PD: puede usar import {watch, ref, onUnmounted} from "vue" para hacer que el código sea más limpio.