Detailed explanation of the difference between v-model directive and .sync modifier in Vue

v-model

    <!--Parent component-->
    <template>
        <!--v-model directive is syntactic sugar-->
        <Child v-model="model"></Child>
        <!-- Expanding the v-model directive is equivalent to the following code-->
        <!-- The default event for v-model binding is input, and the default prop is the value attribute-->
        <Child :value="model" @input="model = $event"></Child>
    </template>

You can also modify the default events and prop custom properties of v-model binding through the model option in the child component:

 //Subcomponent export default {
  model: {
         prop: 'checked',
         event: 'change'
     }
 }

So the equivalent operation when the corresponding parent component uses v-model is:

    <template>
        <Child :checked="model" @change="model = $event"></Child>
    <template>

v-model is usually used for form controls, because this way the component has stronger control capabilities

.sync

   <!-- Parent component -->
    <template>
        <!-- .sync was added in v2.4, it can be used to modify the properties passed to the child component -->
        <Child :xxx.sync="model"></Child>
        <!-- Equivalent to the following code -->
        <Child :xxx = "model" @update:xxx = "model = $event"></Child>
    </template>
    <!-- Child Component -->
    <input :value="xxx" @input = "$emit('update:xxx', $event.target.value)"/>

The attribute name xxx bound here can be changed, and the corresponding attribute name will also change:

    <!-- Parent component -->
    <template>
        <Child :foo.sync="model"></Child>
    </template>
    <!-- Child Component -->
    <input :value = "foo" @input = "$emit('update:foo', $event.target.value)"/>

The principle of .sync uses the $emit method of the child component to dispatch events to the parent component. Its application scenario is that the child component wants to modify the properties passed by the parent component;

The control capabilities of the .sync modifier are all in the parent component, and the event name is relatively fixed update:xxx

The two are essentially the same, there is no difference: "Listen for a trigger event" = "(val) => value = val".

The difference in subtleties

1. However, v-model corresponds to the input event of components such as input or textarea by default. If this input event is replaced in the child component, its essence is exactly the same as the .sync modifier. Relatively simple, cannot have multiple.

// Subcomponents can use custom events to replace the native input events corresponding to v-model by default, but we need to manually $emit in the subcomponent
model: {
        prop: "value",
        event: "update"
},

A component can use the .sync modifier on multiple properties, and can "two-way bind multiple "props" at the same time, unlike v-model, where a component can only have one.

Summarize the functional scenarios:

1. v-model is more about the final operation result, the result of two-way binding, the value, and a change operation.
For example: the value of the input box, the value list of the multiple-select box, the id value list of the tree structure (both ant design and element), etc...
2..sync is aimed at more various states, the mutual transmission of states, status, and an update operation.
For example: component loading status, submenu and tree structure expansion list (a kind of status), internal verification status of a form component, etc....

But there are exceptions, that is, v-model can also replace some .sync situations. This is for when the only function of this component is to switch states, and this state is the final operation value. At this time, the .sync modifier can be replaced. Using two different methods of two-way binding allows us to quickly understand the structure of the component.