On gists

Watch - advanced

Vue.js

watch.js Raw #

// 1) cleanup when watch is ended
import { watch, onWatcherCleanup } from 'vue'

watch(id, (newId) => {
  const { response, cancel } = doAsyncWork(newId)
  // `cancel` is called if `id` changes or the component unmounts
  onWatcherCleanup(cancel)
})



// 2) better watch with desctruct
const { pause, resume, stop } = watch(source, (newVal, oldVal) => {
  // Watch logic
});

// Pause watching
pause();

// Resume watching
resume();




// 3 watch logic, not only true/false ...
watch(reactiveObject, (newVal, oldVal) => {
  // Watch logic
}, { deep: 2 });