Vue の機能で watch などで見ている変数が変更される前のタイミンングで何か処理を行う方法ってありますか？？

Question

実現したいこと

const hoge = ref<number>(1)

例えば上記のような変数 hoge があり、これを以下のように watch しているとします。

    watch(
      () => hoge.value,
      (n, o) => {
       doSomething()
      }
    )

watch では無くても良いのですが、要は hoge の値が更新されてから doSomething() が呼ばれると思いますが、 hoge の値が変わるとなった時に実際の値が変わる前に doSomething() を呼ぶ方法って何かあったりしますでしょうか？

もし何か方法ご存知の方いましたらご教示いただけるととても助かります。。。

--------------------追記----------------------------------------------

以下状況となります。
・監視するのは hoge である必要がある
・hoge が実際に変わる前に関数を呼びたい
理由としては
上記 doSomething では hoge の値を参照しており hoge 変更のタイミングで変更前の値を参照して doSomething を実行したいという状況です。
ですので old の値を doSomething に渡せば実現可能なのですが、それだと他の関数との一貫性が崩れるなどの理由から避けたいと思い何か良い方法があれば、、と思い質問させていただいています。

Answer 1

①hogeは変更監視の値として利用して、表示などに参照する値にはfugaを利用する方法

watch関数、第2引数のコールバックをasyncにして await doSomething にするのはいかがでしょうか？
https://ja.vuejs.org/guide/essentials/watchers.html#basic-example

<script setup>
  const hoge = ref<number>(1);
  const fuga = hoge; // ref<number>(1);でも問題ない
  const doSomething = async () => { await piyo(); };

  watch(hoge, async (new, old) => {
    await doSomething();
    fuga.value = new;
  });
</script>

<template>
  <p>
    <input v-model="hoge" />
  </p>
  <p>{{ fuga }}</p>
</template>

②hogeを変更監視・参照する値として利用する方法

hogeのみで監視・参照を行う必要があれば doSomething の処理結果に応じて、watch関数内で hoge.value の値を入れ直す方法はいかがでしょうか？
(これは循環参照が起こるかも？)

<script setup>
  const hoge = ref<number>(1);
  const doSomething = async () => {
    const result = await piyo();
    return result;
  };

  watch(hoge, async (new, old) => {
    const condition = await doSomething();
    switch(condition) {
      case 'success':
        hoge.value = new;
        break;
      case 'fail':
        hoge.value = old;
        break;
      case 'x':
        ...
    }      
  });
</script>

<template>
  <p>
    <input v-model="hoge" />
  </p>
</template>

追加の提案

hogeを変更するイベントが発行される要素の参照とイベントハンドラーを分ける方法

<script setup>
import { ref } from "vue";

const hoge = ref(1);

const doSomthing = () => {
  console.log("doSomthing", hoge.value);

  return Promise.resolve("success");
};

const handleChange = async (event) => {
  const result = await doSomthing();

  if (result) {
    hoge.value = event.target.value;
  }

  console.log("handleChange", event.target.value);
};
</script>

<template>
  <p>
    <input :value="hoge" @input="handleChange" />
  </p>
</template>

Comments

[Hayato1201]

ご回答ありがとうございます！
後出しの条件となってしまい申し訳ないのですが、以下状況となります。
・監視するのは hoge である必要がある
・hoge が実際に変わる前に関数を呼びたい
理由としては
上記 doSomething では hoge の値を参照しており hoge 変更のタイミングで変更前の値を参照して doSomething を実行したいという状況です。
ですので old の値を doSomething に渡せば実現可能なのですが、それだと他の関数との一貫性が崩れるなどの理由から避けたいと思い何か良い方法があれば、、と思い質問させていただいています。
ですので大変申し訳ありませんが上記以外で何か可能な手はありそうでしょうか？

[tkc310]

@Hayato1201

なるほど、doSomthingの中では変更前のhogeを参照したいということですね。

watchは値の変更を検知するためのAPIのため、hogeの変更が発生する要素のイベントを監視して `handleChange` などのハンドラーで処理する形はいかがでしょうか？

```
<script setup>
import { ref } from "vue";

const hoge = ref(1);

const doSomthing = () => {
// この時点でhogeは変更前の値
console.log("doSomthing", hoge.value);

return Promise.resolve("success");
};

const handleChange = async (event) => {
const result = await doSomthing();

if (result) {
// この時点でhogeは変更後の値
hoge.value = event.target.value;
}

console.log("handleChange", event.target.value);
};
</script>

<template>
<p>
// v-modelではなく:value, +@input or @changeのように参照とハンドラーを分ける
// @refs: https://ja.vuejs.org/guide/components/v-model.html#component-v-model
<input :value="hoge" @input="handleChange" />
</p>
</template>
```

https://codesandbox.io/s/vue-3-composition-api-demo-forked-sllvsz?file=/src/components/Test.vue

[Hayato1201]

ご回答ありがとうございました！