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

怼烎@ 2024-03-30 14:23 11阅读 0赞

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

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

等价于

#### 不同原生组件 ####

> [https://v2.cn.vuejs.org/v2/guide/forms.html][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 事件；

等价于

#### 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][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>

[https_v2.cn.vuejs.org_v2_guide_forms.html]: https://v2.cn.vuejs.org/v2/guide/forms.html
[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]: 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