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:

1<template>
2  <input v-model.lazy="message" />
3</template>
4
5<script setup>
6import { watch, ref } from 'vue'
7
8const message = ref('')
9
10const saveMessage = () => {
11  // do anything with the message
12}
13
14watch(message, (newMessage) => {
15  saveMessage(newMessage) // only called on change events
16})
17</script>