更强大、更灵活！ defineModel 重新定义双向绑定

前言在 Vue 3.4 中，defineModel 宏的引入标志着 Vue 双向绑定机制的一次重大革新。作为 Composition API 的重要补充，defineModel 不仅简化了代码结构，还显著提升了开发效率和代码可维护性。本文将深入探讨 defineModel 的核心原理、最佳实践以及在实际项目中的应用场景，展示其如何优雅地解决传统 v-model 实现中的痛点。传统双向绑定的痛点在 defineModel 出现之前，Vue 的双向绑定主要依赖于 v-model 和手动管理 props 和 emits。虽然这些方法有效，但在复杂场景下，代码往往显得冗长且难以维护。方案一：手动管理 props 和 emits父组件传递数据的同时需要实现一个修改数据的方法传递给子组件<!-- 父组件 -->
<child :carObj="carObj" @carPriceAdd="carPriceAdd" />

<script setup lang="ts">
const carObj = ref<ICarObj>({

brand: 'BMW',
price: 100000

})

const carPriceAdd = () => {

carObj.value.price += 1000

}
</script>子组件接收数据的同时还需要接收父组件传递过来的事件，并通过emits触发调用，就可以修改父组件的数据了<script setup lang="ts">
const props = defineProps<{
modelValue: IUser, // v-model
carObj: ICarObj // v-bind
}>()
const emits = defineEmits(['carPriceAdd'])
const priceAdd = () => {

emits('carPriceAdd')
console.log(props.carObj.price)

}
</script>方案二：使用 v-model还可以借助v-model，可以省去父组件定义修改数据的方法并传递给子组件这一步父组件通过v-model传递数据给子组件<child v-model="user" />