作为一名 Vue 开发者，一定对 v-model 指令爱恨交加。
它提供了强大的双向绑定能力，是构建可复用表单组件的基石。但同时，在 <script setup> 风格的组件中实现一个自定义的 v-model ，总免不了那几行“祖传”的样板代码。
好消息是，随着 Vue3.4 的正式发布，一个堪称“王炸”级的新功能 defineModel 来了。
回忆过去：那些年我们一起写的 v-model 样板代码
在深入 defineModel 的魅力之前，让我们先回顾一下“不堪回首”的过去。
假设我们要创建一个自定义的输入框组件 CustomInput.vue ，并希望父组件能通过 v-model 绑定它的值。
在 Vue3.3 及以前，我们的代码通常是这样的：
** 父组件 App.vue **
<script setup>
import { ref } from 'vue'
import CustomInput from './CustomInput.vue'
const message = ref('Hello Vue')
</script>
<template>
<CustomInput v-model="message" />
<p>Current value: {{ message }}</p>
</template>
** 子组件 CustomInput.vue (旧版写法) **
王炸登场： defineModel
现在，让我们见证奇迹的时刻。使用 Vue 3.4 的 defineModel ，上面的 CustomInput.vue
可以被简化成什么样？
** 子组件 CustomInput.vue (Vue 3.4+ 写法) **
<script setup>
// 1. 就这一行，没了！
const model = defineModel()
</script>
<template>
<input v-model="model" />
</template>
这简直是开发者体验的巨大飞跃！从三件套的繁琐样板代码，到一行直观的声明， defineModel 带来了极致的简洁和优雅。