[Vue.js] v-model.lazy를 사용한 동기화 지연

<template>
  <div>
    <input v-model.lazy="msg" />
    <p>메시지: {{ msg }}</p>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const msg = ref('');

    return {
      msg
    };
  }
};
</script>

v-model.lazy 디렉티브를 사용하면 입력 요소의 값이 변경될 때 즉시 데이터를 업데이트하지 않고 "change" 이벤트 후에 동기화됩니다.

• <input v-model.lazy="msg" />: 사용자가 입력한 값이 msg 변수와 동기화됩니다. 그러나 변경 사항이 즉시 반영되지 않고 "change" 이벤트가 발생한 후에 업데이트됩니다.
• <p>메시지: {{ msg }}</p>: 입력 요소의 값과 동기화된 msg 변수의 값을 표시합니다.

이렇게 하면 사용자가 연속적으로 입력을 하더라도 매번 데이터가 업데이트되는 것이 아니라, 사용자가 입력을 마치고 입력 요소를 벗어났을 때 한 번에 데이터가 업데이트됩니다.