V3中V-Model和V2的区别

 v-model 是 Vue 中使用频率特别高的一个指令，而 Vue3 中的 v-model 有了很大的变化，本文将详细讲述一下 Vue2 和 Vue3 中的 v-model 的区别。
Vue2 中的 v-model
        如果对 Vue2 中的语法很熟悉，这部分可以不看。
        首先来回顾一下 Vue2 中的 v-model，它主要用于表单元素和自定义组件上。v-model本质上是一个语法糖，会对用户的输入做一些特殊处理以达到更新数据，而所谓的处理其实就是给使用的元素默认绑定属性和事件。
        当 v-model 使用在表单元素上时，会根据元素的不同而采用不同的处理：

        当<input type="text">文本 和 <textarea>上使用时，会默认给元素绑定名为 value 的 prop 和名为 input 的事件；
        当<input type="checkbox">复选框 和 <input type="radio">单选框 上使用时，会默认绑定名为 checked 的 prop 和名为 change 的事件；
        当 <select>选择框 上使用时，则绑定名为 value 的 prop 和名为 change 的事件。

        这些是 Vue 默认帮我们处理的，可以直接使用。但是你也会发现一些第三方组件也可以使用 v-model ，比如 Element 中的 Input 组件。这是因为这些组件自己实现了 v-model，原理其实就是上面说到的绑定属性和事件。
        我们可以尝试实现一下 v-model，来开发一个简单的输入组件，就叫 MyInput 吧

<!-- MyInput 组件代码 -->
 
<template>
  <div>
    <input type="text" :value="value" @input="$emit('input',$event.target.value)">
  </div>
</template>
 
<script>
export default {
  props: {
    value: String,  // 默认接收一个名为 value 的 prop
  }
}
</script>

上面代码就实现了组件的 v-model 功能，当在这个组件上使用 v-model 时：

<my-input v-model="msg"></my-input>

其实就等同于：

<my-input :value="msg" @input="msg = $event">

Vue 还提供了 model 选项，用于将属性或事件名称改为其他名称，比如上面的 MyInput 组件，我们改一下

<template>
  <div>
    <input
      type="text"
      :value="title"
      @input="$emit('change', $event.t