Vue的雙向綁定和單向數據流有沒有沖突

這篇“Vue的雙向綁定和單向數據流有沒有沖突”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“Vue的雙向綁定和單向數據流有沒有沖突”文章吧。

單向綁定 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之間的映射關系，數據流指的是組件之間的數據流動。因此，單向數據流也可有雙向綁定，雙向數據流也可以有雙向綁定，兩者不應該混為一談

以上就是關于“Vue的雙向綁定和單向數據流有沒有沖突”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。