深入理解Vue3里的defineModel

随着vue3.4版本的发布，defineModel也正式转正了。它可以简化实现父子组件之间的双向绑定，也是目前官方推荐的双向绑定实现方式。

1.vue3.4的实现双向绑定

大家应该都知道v-model只是一个语法糖，实际就是给组件定义了modelValue属性和监听update:modelValue事件，所以我们以前要实现数据双向绑定需要给子组件定义一个modelValue属性，并且在子组件内要更新modelValue值时需要emit出去一个update:modelValue事件，将新的值作为第二个字段传出去。

<template>
  <CommonInput v-model="inputValue" />
</template>
 
<script setup lang=