Mokkapps Logo

Vue Tip: Use Lazy v-model to Sync State After Change Events

Michael Hoffmann (Mokkapps) - Senior Frontend Developer (Freelancer)
May 22, 2022
1 Minuten Lesezeit
- Ansichten

By default, v-model syncs with the state of the Vue instance on every input event. The .lazy modifier changes the v-model to only sync after change events.

This modifier reduces the number of times our v-model is trying to sync with our Vue instance, which can increase the performance of your Vue application.

Let’s take a look at a simple example:

  <input v-model.lazy="message"/></template>

<script setup>
import { watch, ref } from 'vue'

const message = ref('');

const saveMessage = () => {
  // do anything with the message

watch(message, (newMessage) => {
  saveMessage(newMessage) // only called on change events

If you liked this tip, follow me on Twitter to get notified about new tips, blog posts, and more content from me.

Alternatively (or additionally), you can also subscribe to my newsletter.

Sie haben einen Fehler in diesem Artikel gefunden? Sie möchten gerne etwas klarstellen, aktualisieren oder hinzufügen?

Alle meine Artikel können auf Github editiert werden. Jeder Fix ist willkommen, egal wie klein er sein mag!

Ändern auf Github