vue3和vue2 v-model 和sync语法糖区别

随着Vue3的发布，该版本带来了许多新特性和改进，其中包括对v-model和sync语法糖的优化。在Vue2中，我们通常使用v-model和.sync语法糖来实现双向数据绑定，那么在Vue3中，这些语法糖有什么新变化呢？

1.Vue2 中的双向绑定

在Vue2中，使用v-model指令来实现双向数据绑定是十分方便的，在模板中直接绑定一个变量即可。例如：

<template>
  <h2>{{ msg }}</h2>
  <input v-model="msg">
</template>

<script>
export default {
  data() {
    return {
      msg: '你好'
    }
  }
}
</script>

以上代码表示将表单上的输入值与data中的msg属性进行双向绑定。

2.Vue2 中的 .syc 修饰符

在Vue2中，使用 .sync 在父子组件之间实现双向绑定十分便捷。例如：

<!-- Parent.vue -->
<template>
  <Child :title.sync="pageTitle" />
</template>

<script>
import Child from './Child.vue'

export default {
  components: {
    Child
  },
  data () {
    return {
      pageTitle: '首页'
    }
  }
}
</script>

<!-- Child.vue -->
<template>
  <div>
    <h1>{{ title }}</h1>
    <button @click="$emit('update:title', '标题')">
      修改标题
    </button>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      required: true
    }
  }
}
</script>

以上代码表示从Parent.vue到Child.vue是单向父传子，使用 .sync 修饰符可以使得Child.vue可以直接修改Parent.vue的pageTitle变量。

3.Vue3 中的双向绑定

然而，在Vue3中，.sync 这个语法糖被弃用了。虽然不再推荐这种写法，但在实际编程过程中还是有类似需求的场景出现的，此时可采用v-model加自定义事件（仅适用于组件内）或者$emit来实现。

针对以上的问题，Vue3提供了多种解决方案：

• 对于单向数据流的props，通过emit一个事件改变它们，实现父子之间的通讯；
• 对于需要绑定多个值的双向绑定，则可以使用一个参数为对象的modelValue属性作为整体进行同步，再通过emit触发update:modelValue事件实现衍生绑定其他值。

<!-- Parent.vue -->
<template>
    {{ msg }}
    <Child v-model="msg" />
</template>
<script setup>
import { ref } from 'vue'
import Child from './Child.vue'
const msg = ref('')
</script>

<!-- Child.vue -->
<template>
    <div>
        <input v-model="modelValue" @input="$emit('update:modelValue', $event.target.value)">
    </div>
</template>
  
<script setup>
const props = defineProps({
    modelValue: String,
})
</script>

这样，在Parent.vue中修改值时，并不会改变原有的绑定，因为事件只是用来将修改同步到数据里面改变数据本身，并不作为组件间直接通信的使用。

4…sync 与 v-model的比较

.sync 从功能上看和 v-model 十分相似，实现上都是为了实现数据的“双向绑定”，但从功能和使用上看，v-model 与 .sync 有很大的区别。

在vue2中.sync 更加灵活，它可以在一个组件内给多个 prop 使用，而 v-model 在一个组件中只能有一个 prop 。

在 Vue3 中，v-model 已经可以给多个 prop 使用了，其原理与 .sync 类似。