vue中v-model和.sync修飾符區別

兩者共同點

v-model的本質

 

<!--v-model寫法-->
<my-component type="text" v-model="value">
<!--展開語法糖後的寫法-->
<my-component type="text"
  :value="value"
  @input="value = $event.target.value"
>
<!--
預設針對原生元件input事件，但是如果子元件定義了針對事件
model: {
        prop: "value",
        event: "update"
},
則編譯為
-->
<my-component type="text"
  :value="value"
  @update="(val) => value = val"
>

.sync本質

 

<!--語法糖.sync-->
<my-component :value.sync="value" />
<!--編譯後的寫法-->
<my-component 
  :value="msg" 
  @update:value="(val) => value = val"
>

兩者本質都是一樣，並沒有任何區別： “監聽一個觸發事件”="(val) => value = val"。

細微之處的區別

1.只不過v-model預設對應的是input或者textarea等元件的input事件，如果在子元件替換這個input事件，其本質和.sync修飾符一模一樣。比較單一，不能有多個。

 

// 子元件可以用自定義事件，來替換v-model預設對應的原生input事件，只不過我們需要在子元件手動 $emit
model: {
        prop: "value",
        event: "update"
},

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

總結功能作用場景：

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

image.png

 

但是也有例外，就是v-model也可以替代部分.sync的情況，這是針對於這個元件只有一個功能就是切換狀態的時候，這個狀態就是最終操作值，這時候可以替代.sync修飾符。使用兩種不同的方式雙向繫結，能夠讓我們快速理解元件的結構。