［Vue.js］watchDebounced（値の監視）
公開日：2026-02-24
更新日：2026-02-24
更新日：2026-02-24
1. 概要
watchDebounced は値の変更があってから一定時間経過した後に処理を実行します。これにより、入力欄で1文字ずつ入力した時に処理が実行されるのを防げます。
動作確認：Vite 7.3.1、Vue.js 3.5.25
動作確認：Vite 7.3.1、Vue.js 3.5.25
2. インストール
watchDebounced() を使うには、@vueuse/core をインストールする必要があります。
batch
npm install @vueuse/core3. サンプル１
3.1 コード
index.html と src/main.ts は、「Hello, World」で作成したものを使用します。
src/App.vue
src/App.vue
コード
<script setup lang="ts">
import { ref, watch } from 'vue';
import { watchDebounced } from '@vueuse/core';
const keyword = ref('');
watchDebounced(keyword, async (newValue, oldValue) => {
console.log(`old:${oldValue} new:${newValue}`);
}, { debounce: 300, maxWait: 2000 });
</script>
<template>
<input type="text" v-model="keyword" /><br />
</template>3.2 説明
watchDebounced() で指定する debounce は、ユーザの入力が止まってからコールバックを実行するまでの待機時間です。
また、ユーザが入力を連続でし続けても、maxWait を超えるとコールバックが実行されます。
また、ユーザが入力を連続でし続けても、maxWait を超えるとコールバックが実行されます。
