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

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:
<template>
<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
})
</script>
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