当在自定义组件上使用v-model和.sync时，有什么区别？

Question

我不理解在组件上使用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'选项进行自定义。

如果有人能够解释一下它们之间的区别或应该在什么时候使用哪个，那就太好了。

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

- Peter Petrus

Answer 1

对于Vue.js 2来说，两者基本上做的是相同的事情 - 启用双向绑定，尽管.sync更加灵活多样。它是在为组件添加v-model之后添加的。.sync允许在多个属性上使用v-model逻辑。让我们来比较一下：

• .sync

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

扩展为：

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

• v-model

<input v-model="userName1" />
<comp v-model="userName2" v-model:profile-name="profileName" />

扩展为：

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

<comp
  :value="userName2"
  :profile-name="profileName"
  @update:value="val => userName2 = val"
  @update:profile-name="val => profileName = val"
/>

我们可以看到的区别有：

- 默认的属性名`v-model`总是绑定到名为`value`的属性 - `.sync`允许您使用多个属性 - 组件发出的事件名称（`.sync`为`@update`，`v-model`为`@input`）

`.sync`的一个非常有趣的特性是它对对象的特殊处理。当在对象上使用`.sync`修饰符时，它将一次设置多个属性（更多这里）。

该使用哪个呢？将属性`value`作为组件的键值载体是一种标准模式。在这种情况下，如果您有`value`属性并且想要为其启用双向绑定，则使用`v-model`。在其他所有情况下，请使用`.sync`。

- husayt

---

想要补充一点你遗漏的内容。我们不一定需要使用'value'属性和'input'事件。我们可以进行修改 - https://www.digitalocean.com/community/tutorials/how-to-add-v-model-support-to-custom-vue-js-components - Sanil Khurana

你认为对于为其他开发人员开发组件的人来说，支持v-model和.sync API来处理他们的“单个可编辑属性”组件是有意义的吗？即发出input和update:value两种事件？我担心会发出太多的事件，但也想到这不会成为问题。 - Max Coplan

它对我来说是过时的，参见：https://eslint.vuejs.org/rules/no-deprecated-v-bind-sync.html - Melroy van den Berg

@husayt，我认为第二行代码中有一个拼写错误：“@update:value =” val => userName = val“。换句话说，当更改的属性是“value”，而不是“name”时，会触发更新。 - rubebop

Answer 2

两者之间没有太大的区别，以至于在Vue 3中有一个合并它们的潜在计划：

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

在组件有自然的双向绑定候选项的情况下，您可以使用 v-model。因此，文本输入、复选框等都将使用 v-model。类似地，在具有选择概念的组件上下文中使用也是有意义的。您可以使用 sync，但这通常不是其他开发人员所期望的。

在Vue 2中，您只能将单个prop/event与 v-model连接起来。如果您想要多个props/events的双向绑定，则必须使用 sync。

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

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

它使用 v-model 来选择值，但也使用 sync 来处理 error 和 search-input。

- skirtle