表单输入元素上使用

v-model 可以用于各种不同类型的输入场景，它会根据所需要的元素自动使用对应的 DOM 属性和事件相结合。

• 文本类型的 <input> 和 <textarea> 元素会绑定 value property 并侦听 input 事件；
• <input type="checkbox"> 和 <input type="radio"> 会绑定 checked property 并侦听 change 事件；
• <select> 会绑定 value property 并侦听 change 事件。

上面的实例代码中，例举了三种类型的输入场景，每种场景都有使用 v-model 和不使用 v-model 两种情况。实际操作中可以看出，每种类型使用 v-model 和不使用 v-model 都可以达到相同的结果，也就是说使用 v-model 的情况值发生变动，不使用 v-model 的情况也会发生变动，反之亦然。理解 v-model 如何进行拆分对后面写渲染函数和 jsx 很有帮助。

组件上使用

v-model 可以实现组件的双向数据绑定，相当于 modalValue props 和 update:modalValue 自定义事件。实际场景中可以使用参数，这样既可以操作方便也有利于后续添加多个 v-model。比如说使用 title 作为参数，那么就相当于title props 和 update:title 自定义事件

在上面的例子中，v-model 使用了 title 作为参数，方便子组件书写 props 和 emit，同时也方便同时使用多个 v-model 的场景。另外子组件上可以使用可传值的 computed ，这样就可以在子组件的元素中也实现了 v-model。

结论

v-model 作为 Vue 模版中都有的语法糖，对于输入元素传值和组件间传值的场景提供了很大的便利。但是，理解 v-model 对于后续的深入开发很有必要，毕竟渲染函数和 JSX 并没有该语法。

参考资料：cn.vuejs.org/