vue3实时监听字段值的变化

在Vue 3中，实时监听数据字段变化通常通过双向数据绑定（Two-Way Data Binding）和`watch`API来实现。Vue的响应式系统会在数据发生变化时自动更新视图。

1. **双剑合璧 - `v-model`和`ref`**：
使用`v-model`指令可以方便地在模板上直接绑定到组件实例的数据属性，并自动监听其变化。同时，对于更复杂的不可变响应式数据，可以借助`ref`创建引用型响应式数据，然后在其`.value`属性上进行修改。

2. **`watch`函数**：
`watch`是一个选项特性，它允许你在数据变动时注册回调函数。你可以监听一个数据项、数组或者整个对象，当它的值改变时，回调函数会被调用。例如：

<template>
  <input v-model="message" />
</template>

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

const message = ref('');
watch(message, (newVal) => {
  console.log('Message has changed:', newVal);
});
</script>