.sync與v-model的區別

.sync作用：實現父子組件數據之間的雙向綁定

一：.sync與v-model的共同點

 都是語法糖，都可以實現父子組件中的數據的雙向通信。  

.sync實現通信的方式：

// 父組件
<template>
  <div>
    {{ num }}
    <MyCom1 :a.sync="num"/>
    // 等價於
    <!-- <MyCom1 :a="num" @update:a="val=>num=val"/> -->
  </div>
</template>
 
<script>
import MyCom1 from './MyCom1.vue'
export default {
  components: { MyCom1 },
  data() {
    return {
      num: 100
    }
  }
}
</script>

// 子組件
<template>
 <div>自定義組件com1-{{ a }}
   <button @click="$emit('update:a', a+1)">+1</button>
 </div>
</template>

<script>
export default {
 props: {
    a: { type: Number, required: true }
 }
}
</script>

v-model實現通信的方式：（默認是input事件）

// 父組件
<template>
  <div>
    {{ num }}
    <MyCom1 v-model="num" />
    // 等價於
    <!-- <MyCom1 :value="num" @input="val=>num=val" /> -->
  </div>
</template>
 
<script>
import MyCom1 from './MyCom1.vue'
export default {
  components: { MyCom1 },
  data() {
    return {
      num: 100
    }
  }
}
</script>

// 子組件
<template>
 <div>自定義組件com1-{{ value }}
   <button @click="$emit('input', value+1)">+1</button>
 </div>
</template>
<script>
export default {
 props: {
   value: { type: Number, required: true }
 }
}
</script>

二：.sync與v-model的不共同點

1. 格式不同

.sync 父組件 :a.sync 子組件 @update:a

v-model 父組件 v-model： 子組件 @（input ， value）

2. 一個組件可以多個屬性用.sync修飾符，可以同時"雙向綁定多個“prop”，而並不像v-model那樣，一個組件只能有一個。

例：

// 父組件
<template>
  <div>
    {{ num }}
    <MyCom1 :a.sync="num" :b.sync="num2" />
  </div>
</template>
<script>
import MyCom1 from './MyCom1.vue'
export default {
  components: { MyCom1 },
  data() {
    return {
      num: 100,
      num2: 100
    }
  }
}
</script>

// 子組件
<template>
 <div>自定義組件com1-{{ a }}
   // 更改事件名字即可
   <button @click="$emit('update:a', a+1)">+1</button>
 </div>
</template>
<script>
export default {
 props: {
   a: { type: Number, required: true }
   b: { type: Number, required: true }
 }
}
</script>

三：功能的作用場景：

1.v-model針對更多的是最終操作結果，是雙向綁定的結果，是value，是一種change操作。
比如：輸入框的值、多選框的value值列表、樹結構最終綁定的id值列表（ant design和element都是）、等等...
2..sync針對更多的是各種各樣的狀態，是狀態的互相傳遞，是status，是一種update操作。
比如：組件loading狀態、子菜單和樹結構展開列表（狀態的一種）、某個表單組件內部驗證狀態、等等...