VUE3的v-model

在Vue 3中，`v-model` 是一个特殊的指令，它实现了Vue的核心特性——双向数据绑定。在之前的版本（Vue 2）里，`v-model` 既可以用于表单元素（input、textarea、select 等）进行值绑定，也可以用于组件内部的复杂数据绑定。但在 Vue 3 中，为了优化性能，尤其是对于非响应式的属性，`v-model` 的行为有所调整：

1. **Composition API** (默认选项)：在 Composition API 中，`v-model` 只适用于响应式模板（template 或 <script setup>），在非响应式模板上，你需要显式地使用 `ref` 和 `reactive` 来管理数据，然后手动触发更新。

   <!-- 双向绑定一个输入框 -->
   <input v-model="value" />

2. **Options API**：在这个API下，如果你依然想在非响应式模板上使用 `v-model`，可以借助 `setup()` 函数配合 `ref` 实现：

   <script setup>
     const value = ref('');
   </script>
   <template>
     <input v-model="value.value" />
   </template>

总的来说，Vue 3 的 `v-model` 更注重响应式和性能优化，需要根据项目结构和需求选择合适的方式进行使用。