Vue 开发效率翻倍神器：v-model 深度揭秘 (Vue2/Vue3 全案例)

大家好，我是小墨，射手座，三十多年从未打过架，斗地主逃跑率99% 。代码写得比字多，bug 修得比头发快 ，秉持“能跑就是好代码”的哲学 ‍。日常和前端打交道，代码写得比注释多，希望和大家多多交流！🤝

还在为 Vue 组件间的数据同步写一堆冗余的代码？还在手动监听各种事件，费力更新数据？v-model就是你的救星！小墨带你用大白话和实战案例，带你彻底搞懂v-model在 Vue2 和 Vue3 中的巧妙运用，无论你是刚入门的新手，还是有经验的开发者，都能学有所获，功力大增！

上面的脑图清晰地展示了v-model的工作原理：用户在界面上的操作，通过v-model这座桥梁，同步到组件内部数据，进而触发视图更新；同时，组件内部数据的变化，也会通过v-model反向传递给父组件，实现了数据的双向流动。Vue2 和 Vue3 的主要区别在于实现细节，但核心思想是一致的。

v-model

用通俗的话讲，v-model就是 Vue 提供的一个“超能力”，能让数据和视图（比如输入框、单选框、多选框，甚至是咱们自己写的组件）“心有灵犀”。只要数据变了，界面就会跟着变；反过来，用户在界面上做了操作，数据也会自动更新。从此告别手动更新。

通过对比 Vue2 和 Vue3 的不同实现方式，你会发现 Vue3 在简化开发上做的努力，感受到v-model的华丽变身。

Vue2：揭秘 model 选项

在 Vue2 中，想要在自定义组件上使用v-model，就得请出model选项。它就像组件和外部世界之间的一个“暗号”：

•prop：告诉v-model，“我要绑定的是哪个属性？”（一般是value）

•event：告诉v-model，“数据变化了，我通过哪个事件告诉你？”（一般是input）

父组件：

在这个例子里，我们使用了LanguageSelector组件（一会儿就来实现它），并且通过v-model="selectedLanguages"，把selectedLanguages这个数组和组件紧紧地绑在了一起。

子组件：LanguageSelector的核心代码

重点解析：

•model选项：明确指定prop是selectedLanguages，event是selectionChange。

•toggleSelection方法：负责处理按钮的点击事件，更新选中状态。当用户点选或取消选择时，通过$emit('selectionChange', newSelection)来触发selectionChange事件，把更新后的数组告诉父组件。

Vue3：化繁为简，v-model 全面升级

Vue3 对v-model进行了大刀阔斧的革新，用起来更爽：

1.告别model：直接用v-model，默认绑定到modelValue属性，更新事件是update:modelValue。

2.命名绑定：想绑哪个属性就绑哪个，v-model:myProp="myValue"，对应的更新事件就是update:myProp。

3.多重绑定：一个组件上可以用多个v-model，惊不惊喜？意不意外？

父组件：和 Vue2 版本大同小异

这里只有导入和使用组件的方式变成了 Vue3 的风格，其他没有什么改变,使用了v-model:selectedColors="chosenColors"，把chosenColors数组和组件的selectedColors属性绑定。你也可以试试直接用v-model="chosenColors"，看看会有什么不一样的效果。

子组件：ColorSelector的 Vue3 实现

使用了defineProps来定义props，defineEmits定义了事件 主要变化解读：

• 用defineProps来声明 props，其中就包括selectedColors。

• 用defineEmits来声明需要触发的事件，包括update:selectedColors和自定义的color-change事件。

• 在toggleColor方法里，通过emit('update:selectedColors', newSelection)来更新父组件中的chosenColors。

知识点总结

•v-model的作用：实现数据和视图的双向绑定，减少代码量，提升开发效率。

• Vue2 使用v-model需要在组件中设置model选项，指定绑定的属性和事件。

• Vue3 中的v-model使用更直接，默认绑定到modelValue属性和update:modelValue事件，还可以通过v-model:xxx绑定到任意属性和update:xxx事件。

•v-model不仅可以在表单上用，自定义组件也能使用。

如果觉得内容不错，欢迎点赞、分享、推荐！一起交流前端开发！