v-model和v-bind.sync的区别

Posted 2023-03-20

参考技术A 作用：

vue使用v-model实现input、textarea这些表单标签数据的双向绑定。

本质：

v-model本质上是个语法糖，实际上是<input :value="value" @input="value=$event.target.value"/>的简写。 @input就是input输入监听事件,:value=value就是将监听事件中的输入值注入到input中。
v-model不仅可以给input赋值，还可以获取input中的数据，可以实时获取到数据。

在原生表单元素中：

相当于：

在自定义组件中

相当于

作用：

.sync修饰符是一个自动更新父组件属性的v-on监听器，当子组件改变了prop的值时，会将这个变化同步到父组件。

本质：

.sync也是一个语法糖，sync修饰符的控制能在都在父组件，事件名称也是固定的update:xxx, 需要和sync前面的变量名对应起来。

自定义组件：

相当于：

当子组件需要更新value的值时，需要显示的触发一个更新事件：

也可以用一个对象同时设置多个prop，将.sync修饰符和v-bind配合使用：

两者的本质都是一样的，都是通过监听自定义事件。实现子组件向父组件传参，继而达到更新父组件状态的效果。

1、v-model默认对应的是input等表单标签的input事件，如果在子组件替换这个input事件，其本质和.sync修饰符一模一样。

2、一个组件只能用一个v-model，而一个组件可以对多个属性使用.sync修饰符，可以同时双向绑定多个prop.

在自定义组件上使用时 v-model 和 .sync 有啥区别

【中文标题】在自定义组件上使用时 v-model 和 .sync 有啥区别

【英文标题】：What is the difference between v-model and .sync when used on a custom component在自定义组件上使用时 v-model 和 .sync 有什么区别

【发布时间】：2020-01-16 18:06:09

【问题描述】：

我不明白组件上使用的 v-model 和 .sync 之间的区别。

<my-component v-model="myVar">

V-model 是将变量 (myVar) 绑定到组件属性 'value' 并监听组件发出的 'input' 事件以更新变量 'myVar' 的简写。

<my-component v-bind:prop1.sync="myVar">

.sync 是将变量 (myVar) 绑定到组件属性（在本例中为“prop1”）并监听组件发出的“update:prop1”事件以更新变量“myVar”的简写。

我知道默认情况下 v-model 仅适用于 'value' 属性和 'input' 事件，但即便如此也可以使用组件中的 'model' 选项进行自定义。

如果有人可以向我解释区别或何时使用什么，那就太好了。

这是一个example，我在其中以三种不同的方式使用了相同的组件： 1）手动绑定+事件监听 2) .sync 3) v-model

【参考方案1】：

对于 Vue.js 2，两者几乎都做同样的事情 - 启用双向绑定，尽管 .sync 更通用。它是在为组件添加 v-model 之后添加的。 .sync 允许对多个道具使用 v-model 逻辑。对比一下：

.sync

<comp :value.sync="username" :age.sync="userAge" />

扩展到：

<comp :value="username" :age="userAge" @update:name="val => userName = val" @update:age="val => userAge = val" />

v-model

<comp v-model="userName" />

扩展到：

<comp :value="username" @input="val => username = val" />

我们可以看到的区别是：

默认的属性名称 v-model 始终绑定到名为 value 的属性

.sync 允许你使用多个道具

组件发出的事件名称（.sync 为 @update，v-model 为 @input）

.sync 的一个非常有趣的特性是它对对象的特殊处理。 .sync 修饰符在对象上使用时会同时设置多个道具（更多 here）

使用哪一个？使用属性value 作为组件的键值载体是一种标准模式。在这种情况下，如果您有 value 属性并希望为其启用 2 路绑定，请使用 v-model。在所有其他情况下使用.sync

【讨论】：

想补充一个你错过的点。我们不一定需要使用 'value' 道具和 'input' 事件。我们可以修改它-digitalocean.com/community/tutorials/…

您认为有人为其他开发人员开发组件以支持 v-model 和 .sync api 用于他们的“单一可编辑道具”组件是否有意义？即同时发出input 和update:value？我担心发出太多事件，但也认为这不会成为问题

它说我不推荐使用，另请参阅：eslint.vuejs.org/rules/no-deprecated-v-bind-sync.html

【参考方案2】：

没有太大区别，以至于有计划将它们合并到 Vue 3 中：

https://github.com/vuejs/rfcs/pull/8

如果组件具有双向绑定的自然候选者，您将使用v-model。所以文本输入、复选框等都将使用v-model。同样，它在具有选择概念的组件的上下文中可能是有意义的。您可以改用 sync，但这通常不是其他开发人员所期望的。

在 Vue 2 中，您只能将单个道具/事件连接到 v-model。如果你想对多个道具/事件进行双向绑定，那么你必须使用sync。

Vuetify 包含几个同时使用v-model 和sync 的组件示例。例如v-autocomplete:

https://vuetifyjs.com/en/components/autocompletes

这将v-model 用于选定的值，但它也将sync 用于error 和search-input。