vue2、vue3中的v-model的区别以及为什么vue3废弃.sync修饰符

vue2、vue3的v-model在原生组件上表现相同，组件上表现不同

都说v-model是一种语法糖，因为它本质上是相当于v-bind和v-on的简写组合

<input v-model="searchText" />

等价于

<input
  :value="searchText"
  @input="searchText = $event.target.value"
/>

不同原生组件

https://v2.cn.vuejs.org/v2/guide/forms.html
v-model 在内部为不同的输入元素使用不同的 property 并抛出不同的事件：

input 和 textarea 元素使用 value property 和 input 事件；
checkbox 和 radio 使用 checked property 和 change 事件；
select 字段将 value 作为 prop 并将 change 作为事件。

vue2组件中使用v-model

默认情况下也使用 value property 和 input 事件；

<input v-model="searchText" />

等价于

<input
  :value="searchText"
  @input="searchText = $event.target.value"
/>

2.2.0+ 新增可以自定义组件的 v-model

<text-document v-model="title"></text-document>

在text-document组件中可以指定model的传参与更新传参事件，比如：

export default {
  model: {
     prop: 'title',
     event: 'update:title',
  },

相当于

<text-document :title="title" @update:title="newValue => title= newValue"></text-document>

vue2 .sync修饰符

https://v2.cn.vuejs.org/v2/guide/components-custom-events.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E7%BB%84%E4%BB%B6%E7%9A%84-v-model

具名

<text-document :title.sync="title"></text-document>

相当于

<text-document :title="title" @update:title="newValue => title= newValue"></text-document>

所以text-document组件中this.$emit('update:title', newTitle)来修改.sync修饰符绑定的title变量

不具名

当我们用一个对象同时设置多个 prop 的时候，也可以将这个 .sync 修饰符和 v-bind 配合使用：
这样会把 doc 对象中的每一个 property (如 title) 都作为一个独立的 prop 传进去，然后各自添加用于更新的 v-on 监听器。

<text-document v-bind.sync="doc"></text-document>

doc:{
  title:"",
  content:""
}

则相当于

<text-document :title="title" @update:title="newValue => title= newValue" :content="content" @update:content="newValue => content= newValue"></text-document>

vue3移除了.sync修饰符，因为直接使用了v-model来代替.sync

不具名

<text-document v-model="title"></text-document>

相当于

<text-document :modelValue="title" @update:modelValue="newValue => title= newValue"></text-document>

具名

<text-document v-model:title="title"></text-document>

相当于

<text-document :title="title" @update:title="newValue => title= newValue"></text-document>