definemodel 是 vue 3.4+ 官方推荐的双向绑定语法糖，一行声明即可替代 props + emit + computed，支持默认 modelvalue、多字段 v-model、typescript 类型与默认值、值转换等特性，不破坏单向数据流且零运行时开销。
Vue 3.4+ 中，defineModel 是官方推荐的双向绑定写法，它把原本需要手动声明 props、emit 和 computed 的三步操作，压缩成一行可读可写的响应式变量声明。不需要 import，不破坏单向数据流，也不影响 TypeScript 类型推导。
基础用法：默认 modelValue 绑定
适用于最常见的单个 v-model 场景，比如自定义输入框、开关、滑块等：
- 子组件中直接写
const model = defineModel()，它自动对应modelValueprop 和update:modelValue事件 - 模板里直接
<input v-model="model">，就像操作本地 ref 一样自然 - 父组件仍用
<myinput v-model="text"></myinput>，完全兼容旧写法，无需改动调用方
多字段 v-model：支持自定义字段名
当组件需要同时控制多个状态（如值、禁用、校验结果），可声明多个 defineModel：
-
const value = defineModel()→ 对应v-model（即v-model:modelValue） -
const disabled = defineModel('disabled')→ 对应v-model:disabled - 父组件写法：
<forminput v-model="val" v-model:disabled="isDisabled"></forminput>
TypeScript 类型与默认值支持
在 <script setup lang="ts"></script> 中，defineModel 支持完整类型标注和运行时校验：
- 指定类型：
const price = defineModel<number>()</number> - 设置默认值：
const active = defineModel<boolean>({ default: true })</boolean> - 类型 + 默认值组合：
const name = defineModel<string>({ default: 'Guest' })</string>
值转换：配合 computed 实现 get/set 格式化
需要显示格式化或输入转换（如转大写、金额格式、日期解析）时，推荐封装计算属性：
- 先声明模型：
const value = defineModel<string>()</string> - 再创建计算属性：
const displayValue = computed({ get: () => value.value.toUpperCase(), set: v => value.value = v.toLowerCase() }) - 模板绑定计算属性：
<input v-model="displayValue">
defineModel 是编译器级语法糖，不引入额外依赖，不改变响应式原理，也不影响调试体验。只要 Vue 版本 ≥ 3.4，就能开箱即用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
