瞭解vue中的單項資料流和雙向資料繫結，兩種衝突嗎？

眾所周知，Vue中更加推薦單向資料流的狀態管理模式(比如Vuex)，但Vue同時支援通過v-model實現雙向資料繫結。（學習視訊分享：）

那麼問題來了，單項資料流和雙向資料繫結的概念，這兩種不是相互衝突的嗎？即然能用v-model雙向資料繫結，不應該就是雙向資料流了嗎？

本文主要包括以下內容

• 單向繫結 vs 雙向繫結

• 單向資料流 vs 雙向資料流

• 為什麼說v-model只是語法糖

單向繫結 vs 雙向繫結

單雙向繫結，指的是View層和Model層之間的對映關係。

react採取單向繫結，如圖所示：

在React中，當View層發生更改時，使用者通過發出Actions進行處理，Actions中通過setState對State進行更新，State更新後觸發View更新。可以看出，View層不能直接修改State，必須要通過Actions來進行操作，這樣更加清晰可控

單向繫結的方式的優點在於清晰可控，缺點則在於會有一些模板程式碼，Vue則同時支援單向繫結和雙向繫結

• 單向繫結：插值形式{{data}}，v-bind也是單向繫結
• 雙向繫結：表單的v-model，使用者對View層的更改會直接同步到Model層

實際上v-model只是v-bind:value 和 v-on:input的語法糖，我們也可以採取類似react的單向繫結。兩者各有利弊，單向繫結清晰可控，但是模板程式碼過多，雙向繫結可以簡化開發，但是也會導致資料變化不透明，優缺點共存，大家可以根據情況使用。

單向資料流 vs 雙向資料流

資料流指的是元件之間的資料流動。

Vue與React都是單向資料流的模型，雖然vue有雙向繫結v-model，但是vue和react父子元件之間資料傳遞，仍然還是遵循單向資料流的，父元件可以向子元件傳遞props，但是子元件不能修改父元件傳遞來的props，子元件只能通過事件通知父元件進行資料更改，如圖所示：

通過單向資料流的模型，所有狀態的改變可記錄、可跟蹤，相比於雙向資料流可加容易維護與定位問題

為什麼說v-model只是語法糖

你可以用 v-model 指令在表單 <input>、<textarea> 及 <select> 元素上建立雙向資料繫結。它會根據控制元件型別自動選取正確的方法來更新元素。儘管有些神奇，但 v-model 本質上不過是語法糖。它負責監聽使用者的輸入事件以更新資料，並對一些極端場景進行一些特殊處理

正如上面所述，Vue檔案中說v-model只是語法糖

<input v-model=「phoneInfo.phone」/>

//在元件中使用時，實際相當於下面的簡寫
<input :value="PhoneInfo.phone" @input="val => { PhoneInfo.phone = val }"

那麼問題來了，為什麼說v-model不是真正的雙向資料流呢？按照這道理，是不是可以認為model->view的單向資料流也是語法糖啊，也是vue作者通過一定方法實現的而已

真正的原因上面已經說了，資料繫結是View與Model之間的對映關係，資料流指的是元件之間的資料流動

v-model不是真正的雙向資料流，是因為它不能直接修改父元件的值，比如你在v-model中繫結props中的值是會報錯的，它只能繫結元件的值

而真正的雙向資料流，比如AngularJs，是允許在子元件中直接更新父元件的值的，這就是為什麼說v-model只是語法糖的原因

總結

總得來說，單雙向資料繫結與資料流是兩個不同維度的概念，資料繫結是View與Model之間的對映關係，資料流指的是元件之間的資料流動。因此，單向資料流也可有雙向繫結，雙向資料流也可以有雙向繫結，兩者不應該混為一談

本文轉載自：https://juejin.cn/post/7085139499767840782

作者：程式設計師江同學

（學習視訊分享：、）

以上就是了解vue中的單項資料流和雙向資料繫結，兩種衝突嗎？的詳細內容，更多請關注TW511.COM其它相關文章！