vue3 modelvalue双向绑定

Vue 3 中的 `modelValue` 是响应式系统的核心组件，特别是在使用 Vue 的模板语法 `<input v-model="value">` 或 `<textarea v-model="message"></textarea>` 进行双向数据绑定时。`v-model` 简化了数据和视图之间的交互：

1. **数据绑定**：当你在表单元素上使用 `v-model`，它会自动创建一个数据属性（通常是同名的小写，如 `value`），并将其值与 DOM 元素的值保持同步。

2. **双向更新**：当你在输入框中修改内容，`modelValue` 会实时更新，反之亦然。如果你在 JavaScript 中直接改变这个数据属性，DOM 也会相应地更新。

3. **简化状态管理**：通过 `v-model`，Vue 自动处理了数据变化的跟踪和更新DOM的过程，开发者无需手动设置和清除事件监听器。

例如：

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

<script setup>
import { ref } from 'vue';
const message = ref('');
</script>

在这个例子中，`message` 变量就是 `modelValue`，当文本框的内容发生变化时，`message` 的值也会随之改变。