vue响应式原理实现（vue3 组件响应式v-model 失效，实践踩坑，一文搞懂组件响应式原理，对初学者友好）
前情提要
vue3的v-model已经有了变化 ，假如你还不知道其中细节 ，看完这篇文章你就完全明白了 ，我以踩坑的场景来进行解析 。起因是在我的项目中需要一个输入框组件 ，这个组件用来根据输入异步查询系统内已有人员 ，而且在多个地方需要用到这个输入框 ，所以必须要封装成组件 ，但是我还是本着学习的态度认真的读完了官方文档相关的内容 ，结果问题还是出现了；
实战解析
首先我读了有关的内容比如这段官方文档；
有了官方文档的基础知识 ，我大概的了解了如果你想封装一个响应式组件 ，那么基础是你需要这样写：
<!-- CustomInput.vue --> <script setup> defineProps([modelValue]) defineEmits([update:modelValue]) </script> <template> <input :value="modelValue" @input="$emit(update:modelValue, $event.target.value)" /> </template>这是个最基本的例子 ，我看完后感觉很简单 ，于是有了以下写法：
//father <InputUser :modelValue="fatherValue"></InputUser> //childe <el-select v-model="modelValue"> <el-option v-for="item in options" :key="item.id" :label="item.label" :value="item.value" /> </el-select> <script setup> defineProps({ modelValue: String, }) </script>这里我就简单列下dom可以说明问题就行 ，以上写法会导致双向绑定失败；因为vue3的组件v-model是有说法的 ，只有俩种写法是正确的 ，父组件处：
v-model=“item.value ” v-model:modelValue = “item.value ” //注意之间使用:modelValue不可以🤔为什么？
1 、默认情况下 ，v-model 在组件上都是使用 modelValue 作为 prop ，并以 update:modelValue 作为对应的事件 。所以我们的响应式生效了 ，也就是说你的props属性如果有一个叫modelValue ，vue3的v-model会默认与它匹配
2 、我们可以通过给 v-model 指定一个参数来更改这些名字 ，例如： v-model：title ，就会匹配props中的title,这里也就是为什么我们可以v-model:modelValue这样写；
3 、为什么:modelValue = "item.value" 不可以 ，因为v-model是vue语法糖 ，背后原理是利用emit(‘update:modelValue’)来修改 ，所以可以 ，而:简写不具备组件通信中的语法糖功能；所以在vue3中 ，为了更好的对组件进行双向响应式 ，就只能用v-model这种写法 。
最后
📚 vue3专栏
☃️ 个人简介：一个喜爱技术的人 。
🌞 励志格言: 脚踏实地 ，虚心学习 。
❗如果文章还可以 ，记得用你可爱的小手点赞👍关注✅ ，我会在第一时间回 、回访 ，欢迎进一步交流 。创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！