One-Time Watchers with 'once'

Snippet

One-Time Watchers with 'once'

Introduced in Vue 3.4, the 'once' option for watchers ensures the callback only executes the first time the source changes. This is perfect for initialization logic or one-off event reactions that shouldn't persist.

snippet.js
javascript
import { watch, ref } from 'vue';
 
const status = ref('pending');
 
watch(status, (newVal) => {
  console.log('Status initialized to:', newVal);
  // Perform setup logic that should only run once
}, { once: true });

vue

Breakdown

{ once: true }

Tells Vue to automatically stop the watcher after its first successful trigger.

Previous snippet Next snippet

More Intermediate JavaScript exercises →

From your library

One-Time Watchers with 'once'

Related