Javascript is required
Mokkapps LogoMichael Hoffmann

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

Michael Hoffmann (Mokkapps) - Senior Frontend Developer (Freelancer)
Michael Hoffmann
May 22, 2022
1 min read
|
117 views
v-model
Vue Tip: Use Lazy v-model to Sync State After Change Events Image

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 Vue tip, follow me on Twitter to get notified about new tips, blog posts, and more. Alternatively (or additionally), you can subscribe to my weekly Vue newsletter.