背景
最近在做一些业务需求时，涉及到大量的父子组件数据传递，所以自然而然也会涉及到使用v-model去往子组件里传数据，达到双向绑定的效果，比如以下示例：

这是父组件里的代码

这是子组件里的代码，子组件里需要利用三个 API 才能达到双向绑定的效果
defineProps： 接收modelValue
defineEmits： 更新modelValue
computed： 获取、执行更新modelValue

封装 Hooks ？
但是真的是有点受够了，主要是这么写太多相似的代码了，所以我想着封装一个 Hooks 来完成这个操作，命名为useModel，使用方式如下

其实就是一个函数，接收 props、emit，然后把刚刚的逻辑放入到一个公共 Hooks 函数里去做罢了~这样确实是大大降低了代码的重复性

defineModel
但是偶然看到 Vue3.3 有一个新的 API，叫做defineModel的，它的出现就是为了解决上述说的问题，父子组件双向绑定时可以很方便的去做，那么要怎么去用这个 API 呢？

首先我们得在 vite.config 中去开启这个功能，因为这个功能是 Vue3.3 的实验性功能

接着去到子组件中使用defineModel即可完成双向绑定效果了！！！