简介
defineModel 是 Vue 3.4 引入并在 Vue 3.5+ 中稳定的一个组合式 API，它简化了组件的双向数据绑定实现。在此之前，实现双向绑定需要手动定义 props 和 emits，而 defineModel 将这个过程自动化，让代码更加简洁和直观。
主要特性
- 简化双向绑定：自动处理 props 和 emits 的定义
- 类型安全：完整的 TypeScript 支持
- 多模型支持：支持多个 v-model 绑定
- 向后兼容：与现有的 props/emits 模式完全兼容
基础用法
传统方式 vs defineModel
传统方式（Vue 3.4 之前）：
<script setup>
// 子组件
const props = defineProps(["modelValue"]);
const emit = defineEmits(["update:modelValue"]);const updateValue = (newValue) => {emit("update:modelValue", newValue);
};
</script><template><input :value="props.modelValue" @input="updateValue($event.target.value)" />
</template>使用 defineModel：
<script setup>
// 子组件
const model = defineModel();
</script><template><input v-model="model" />
</template>父组件使用
<script setup>
import { ref } from "vue";
import MyInput from "./MyInput.vue";const inputValue = ref("Hello World");
</script><template><MyInput v-model="inputValue" /><p>当前值：{{ inputValue }}</p>
</template>高级用法
综合示例
<!-- 子组件 -->
<script setup>
// 定义 v-model
const modelValue = defineModel();// 带默认值
const count = defineModel("count", { default: 0 });// 多个 v-model
const firstName = defineModel("firstName");
const lastName = defineModel("lastName");
</script><template><div class="min-h-screen bg-gray-100 py-8 px-4"><div class="max-w-lg mx-auto"><div class="bg-white rounded-lg shadow-md p-6"><h2 class="text-xl font-semibold text-gray-800 mb-6 text-center">用户信息表单</h2><div class="space-y-4"><!-- Main Value Input --><div><label class="block text-sm font-medium text-gray-700 mb-2">主要信息</label><div class="flex items-center space-x-3"><inputv-model="modelValue"placeholder="请输入主要信息"class="flex-1 px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-gray-500 focus:border-gray-500 transition-colors"/><span class="text-sm text-gray-600 min-w-0 flex-shrink-0">{{ modelValue || "未填写" }}</span></div></div><!-- Count Input --><div><label class="block text-sm font-medium text-gray-700 mb-2">数量</label><div class="flex items-center space-x-3"><inputv-model="count"type="number"placeholder="请输入数量"class="flex-1 px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-gray-500 focus:border-gray-500 transition-colors"/><span class="text-sm text-gray-600 min-w-0 flex-shrink-0">{{ count }}</span></div></div><!-- Name Inputs --><div><label class="block text-sm font-medium text-gray-700 mb-2">姓名</label><div class="grid grid-cols-2 gap-3 mb-2"><inputv-model="firstName"placeholder="名字"class="px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-gray-500 focus:border-gray-500 transition-colors"/><inputv-model="lastName"placeholder="姓氏"class="px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-gray-500 focus:border-gray-500 transition-colors"/></div><div class="text-right"><span class="text-sm text-gray-600">{{firstName && lastName? `${firstName} ${lastName}`: "未完整填写"}}</span></div></div></div></div></div></div>
</template><!-- 父组件 -->
<script setup>
import { ref } from "vue";
import MyComponent from "./MyComponent.vue";const value = ref("Hello");
const count = ref(5);
const first = ref("John");
const last = ref("Doe");
</script><template><div class="min-h-screen bg-gray-50"><MyComponentv-model="value"v-model:count="count"v-model:firstName="first"v-model:lastName="last"/></div>
</template>验证器
const count = defineModel("count", {default: 0,validator: (value) => {return typeof value === "number" && value >= 0;},
});修饰符 (.trim, .lazy)
const text = defineModel("text", {default: "",// 使用 set 转换器自动去除空格set(value) {return typeof value === "string" ? value.trim() : value;},
});与传统方式的对比
| 特性 | 传统方式 | defineModel |
|---|---|---|
| 代码量 | 较多 | 简洁 |
| 类型安全 | 需手动定义 | 自动推导 |
| 多模型支持 | 复杂 | 简单 |
| 学习成本 | 较高 | 较低 |
| 性能 | 相同 | 相同 |
注意事项
- Vue 版本要求：需要 Vue 3.4+ 版本
- 编译器支持：需要配置支持
defineModel的编译器 - 向后兼容：可以与传统的 props/emits 方式混用
- SSR 支持：完全支持服务端渲染
总结
defineModel 是 Vue 3.5+ 中一个强大而简洁的 API，它大大简化了组件双向数据绑定的实现。通过减少样板代码、提供更好的类型支持和更直观的 API，它让开发者能够更专注于业务逻辑的实现。
无论是简单的表单输入还是复杂的自定义组件，defineModel 都能提供优雅的解决方案，是现代 Vue 开发中不可或缺的工具。
Vue 3.5 defineModel：让组件开发效率提升 10 倍 - 高质量源码分享平台-免费下载各类网站源码与模板及前沿技术分享
