🧛‍♂️

VueUseのuntilは便利だと叫びたい

に公開
TypeScript
Vue.js
VueUse
tech

Vue Advent Calendar 2025 4 日目の記事です。

Vue の watch

Vue ユーザーの皆さん、watch 使ってますか？
状態の変更に応じて「副作用」を実行できる便利な関数のアレです。

watch のコード例は以下の通りです。

<script setup lang="ts">
import { ref, watch } from 'vue'

const count = ref(0)
const inc = () => { count.value += 1 }

watch(count, (newVal) => {
  if (newVal === 3) {
    alert('3になったよ！')
  }
})
</script>

<template>
  <p>Count: {{ count }}</p>
  <button @click="inc">Increment</button>
</template>

watch は便利な反面、乱用すると意図しないタイミングで実行されてしまうことがあります。

watch 自体にも once: true などでトリガータイミングを制限する方法はありますが、本日は VueUse の until を紹介したいと思います。

VueUse の until

VueUse は「Collection of Vue Composition Utilities」と公式に書かれている通り、Vue.js を使う上で強力なユーティリティ関数群になります。
その中のカテゴリ Watch に until というメソッドがあります。

説明は Promised one-time watch for changes（変更を一度だけ監視する Promise ベースの関数）だけです。シンプルですね。

実際に上記のコードで watch ではなく until を使ってみます。

<script setup lang="ts">
import { ref } from 'vue'
import { until } from '@vueuse/core'

const count = ref(0)
const inc = () => { count.value += 1 }

// untilを利用
until(count).toBe(3).then(() => { alert('3になったよ！') })
</script>

<template>
  <p>Count: {{ count }}</p>
  <button @click="inc">Increment</button>
</template>

watch で書くより宣言的に書けていますね。
Promise 型なので非同期処理などでも気軽に利用できます。

また、until の条件としては以下のような状態を待つことができ、汎用性も高いです。（until - more-examples より）

await until(ref).toBe(true)
await until(ref).toMatch(v => v > 10 && v < 100)
await until(ref).changed()
await until(ref).changedTimes(10)
await until(ref).toBeTruthy()
await until(ref).toBeNull()

await until(ref).not.toBeNull()
await until(ref).not.toBeTruthy()

まとめ

今回は VueUse の関数 until についてまとめました。
VueUse には便利な関数が山ほどあるので勉強しがいがあります。

参考

GitHubで編集を提案

Discussion