v-model和.sync的区别

1. v-model和.sync的基本概念

v-model和.sync是Vue中两种双向绑定的方式，可以实现输入控件与Vue实例中数据的双向同步。v-model是Vue中最常用的指令之一，它可以在 input、textarea、select、checkbox、radio等表单元素上创建双向数据绑定。而.sync则是Vue提供的一种语法糖，它可以简化子组件中通过 $emit 触发父组件事件，并传递数据的过程，使得代码更加简洁易读。

2. v-model和.sync的语法和用法

2.1 v-model

v-model可用于input、textarea、select、radio、checkbox等表单元素上，它的语法格式为：

<input v-model="value">
<textarea v-model="value">textarea>
<select v-model="value">
  <option v-for="option in options" :value="option.value">{{ option.label }}option>
select>
<input type="radio" v-model="radioValue" value="1">
<input type="checkbox" v-model="checkedValue" value="1">

其中value是Vue实例中定义的数据，v-model会将表单元素上的值与value进行双向绑定。

2.2 .sync

.sync是Vue2.3版本以后新增的语法糖，其主要作用是简化子组件中通过 $emit 触发父组件事件，并传递数据的过程。其语法格式为：

// 父组件模板
<child :value.sync="parentValue">child>
 
// 子组件模板
<template>
  <input :value="innerValue" @input="updateValue($event.target.value)">
template>
 
<script>
  export default {
    props: ['value'],
    computed: {
      innerValue: {
        get () {
          return this.value
        },
        set (val) {
          this.$emit('update:value', val)
        }
      }
    },
    methods: {
      updateValue (val) {
        this.$emit('update:value', val)
      }
    }
  }
script>

其中，父组件将数据传入子组件的 value 属性上，子组件通过计算属性 innerValue 将其转化为内部使用的数据，并在 input 事件触发时，通过 $emit 触发 update:value 事件，并传递数据 val 给父组件。

在父组件模板中使用 .sync 修饰符后，Vue会自动将子组件触发的 update:value 事件转化为属性更新事件。因此，当子组件触发 update:value 事件时，父组件中的 value 属性会自动更新。

3. v-model和.sync的异同点

3.1 相同点

v-model和.sync都可以实现输入控件与Vue实例中数据的双向同步，都能够使得数据的读取和更新变得非常简单。

3.2 不同点

3.2.1 用法不同

v-model可以直接应用于表单元素（input、textarea、select、radio、checkbox等），而.sync需要通过子组件传递父组件数据。

3.2.2 需要添加事件处理

在使用.sync时，需要在子组件中手动添加 update:value 事件处理函数来触发父组件事件。而v-model则不需要，因为Vue已经内置了对v-model指令的处理。

3.2.3 适用场景不同

v-model适用于简单场景下的单向或双向绑定。而.sync适用于复杂业务场景下的多层嵌套组件之间的数据传递。

4. v-model和.sync的应用举例

下面通过实例来说明v-model和.sync的应用。

4.1 v-model的应用

<template>
  <div>
    <h3>请输入用户名：h3>
    <input v-model="username" placeholder="请输入用户名">
    <h3>请输入密码：h3>
    <input type="password" v-model="password" placeholder="请输入密码">
    <button @click="login">登录button>
  div>
template>
 
<script>
  export default {
    data () {
      return {
        username: '',
        password: ''
      }
    },
    methods: {
      login () {
        if (this.username === 'admin' && this.password === '123456') {
          alert('登录成功！')
        } else {
          alert('用户名或密码错误！')
        }
      }
    }
  }
script>

在上述代码中，v-model分别绑定了用户名和密码的input元素，实现了输入框中内容与Vue实例中数据的双向绑定。当用户点击登录按钮时，通过比对用户名和密码是否正确来显示登录成功或失败的提示。

4.2 .sync的应用

在这个例子中，有两个组件：一个父组件和一个子组件，父组件通过props属性传递了一组数据给子组件，并使用了.sync修饰符来实现了子组件数据的双向绑定。

// 父组件模板
<template>
  <div>
    <h3>父组件h3>
    <p>父组件数据：{{ parentData }}p>
    <child :child-data.sync="parentData">child>
  div>
template>
 
<script>
  import Child from './Child.vue'
  export default {
    components: {
      Child
    },
    data () {
      return {
        parentData: 'hello'
      }
    }
  }
script>
 
// 子组件模板
<template>
  <div>
    <h3>子组件h3>
    <p>子组件数据：{{ childData }}p>
    <input v-model="childData">
  div>
template>
 
<script>
  export default {
    props: ['childData'],
    // 注意：computed属性名必须是value，否则会出现编译错误
    computed: {
      value: {
        get () {
          return this.childData
        },
        set (newValue) {
          this.$emit('update:childData', newValue)
        }
      }
    }
  }
script>

在上述代码中，父组件传递了一个叫做parentData的数据给子组件，并使用了.sync修饰符。子组件通过props接收到父组件传递过来的数据，并通过computed属性将其转化为内部使用的数据childData，并在input事件触发时，通过 $emit 触发 update:childData 事件，并传递数据 newValue 给父组件。

当子组件触发 update:childData 事件时，父组件中的 parentData 属性会自动更新，从而实现了子组件和父组件间的数据双向同步。

5. 总结

v-model和.sync是Vue中两种常用的双向绑定方式，它们都可以使得输入控件与Vue实例中数据的双向同步。v-model可以应用于简单场景下的单向或双向绑定，而.sync适用于复杂业务场景下的多层嵌套组件之间的数据传递。在使用.sync时，需要在子组件中手动添加 update:value 事件处理函数来触发父组件事件。在实际开发中，可以根据业务场景的不同来选择使用v-model或.sync来实现双向绑定，让代码变得更加简洁、易读。