v-model和.sync的异同点

v-model原理

<input type="text" v-model="num">

以上代码等价于

<input type="text" :value="num" @input="(val)=>num=val">

扩展：
v-model在内部为不同的输入元素使用不同的属性并抛出不同的事件:

1. text和textarea元素使用value属性和input事件;
2. checkbox和radio使用checked属性和change事件;
3. select字段将value作为prop并将change作为事件。

.sync修饰符的原理

父组件

 <MyCom :a.sync="num" />
 export default {
  components: { MyCom },
  data(){
    return { num: 100 }
  },

子组件

<template>
  <div>
    我是子组件-sync, {{a}}
    <button @click="$emit('update:a', 200) "> 200</button>
  </div>
</template>
<script>
export default {
  //在子组件内部，拿到父组件传递数据
  props:['a']
}
</script>

以上代码等价于

<MyCom :a="num" @update:a="val=>num=val" />

v-model与.sync的异同点

• 相同点:都是语法糖，都可以实现父子组件中的数据的双向通信。

• 区别点：
  1.格式不同。v-modal=“num”, :num.sync=“num”
  2.:a.sync @update:a
  3.v-model只能用一次; .sync可以有多个。

• 特别说明：在vue3中 v-model可以使用多次，.sync删除了