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 在父子组件之间实现双向绑定十分便捷。例如：