update:modelValue暴露的v-modle , 如何watch

在 Vue3 中，`v-model` 属性通常与 `ref` 结合使用，`update:modelValue` 是一个自定义事件，它会在 `v-model` 的值更新时触发。如果你想监听这个值的变化，可以像下面这样创建一个 `watch`：

<template>
  <input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" />
</template>

<script setup>
import { ref, onMounted } from 'vue';

const modelValue = ref('');

onMounted(() => {
  // 初始化时也可以直接 watch
  watch(modelValue, (newValue) => {
    console.log('Model value updated:', newValue);
  });
});

// 或者你可以使用 `setup` 中的 `useEffect` 来代替 onMounted
// 在每次模型值变化时都会执行
useEffect(() => {
  watch(modelValue, ...);
}, [modelValue]);
</script>

在这里，我们在输入框上绑定了 `modelValue`，并在用户修改输入框内容时通过 `@input` 事件触发 `update:modelValue` 并更新内部的 `modelValue`。然后在 `watch` 函数里，每当 `modelValue` 变化，就会打印出新的值。