Vue 3.5 defineModel：让组件开发效率提升 10 倍

简介

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
代码量	较多	简洁
类型安全	需手动定义	自动推导
多模型支持	复杂	简单
学习成本	较高	较低
性能	相同	相同

注意事项

1. Vue 版本要求：需要 Vue 3.4+ 版本
2. 编译器支持：需要配置支持 defineModel 的编译器
3. 向后兼容：可以与传统的 props/emits 方式混用
4. SSR 支持：完全支持服务端渲染

总结

defineModel 是 Vue 3.5+ 中一个强大而简洁的 API，它大大简化了组件双向数据绑定的实现。通过减少样板代码、提供更好的类型支持和更直观的 API，它让开发者能够更专注于业务逻辑的实现。

无论是简单的表单输入还是复杂的自定义组件，defineModel 都能提供优雅的解决方案，是现代 Vue 开发中不可或缺的工具。

 Vue 3.5 defineModel：让组件开发效率提升 10 倍 - 高质量源码分享平台-免费下载各类网站源码与模板及前沿技术分享