Vue的雙向綁定和單向數(shù)據(jù)流有沒(méi)有沖突

這篇“Vue的雙向綁定和單向數(shù)據(jù)流有沒(méi)有沖突”文章的知識(shí)點(diǎn)大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價(jià)值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來(lái)看看這篇“Vue的雙向綁定和單向數(shù)據(jù)流有沒(méi)有沖突”文章吧。

單向綁定 vs 雙向綁定

單雙向綁定，指的是View層和Model層之間的映射關(guān)系。
react采取單向綁定，如圖所示：

在React中，當(dāng)View層發(fā)生更改時(shí)，用戶通過(guò)發(fā)出Actions進(jìn)行處理，Actions中通過(guò)setState對(duì)State進(jìn)行更新，State更新后觸發(fā)View更新。可以看出，View層不能直接修改State，必須要通過(guò)Actions來(lái)進(jìn)行操作，這樣更加清晰可控

單向綁定的方式的優(yōu)點(diǎn)在于清晰可控，缺點(diǎn)則在于會(huì)有一些模板代碼，Vue則同時(shí)支持單向綁定和雙向綁定

• 單向綁定：插值形式{{data}}，v-bind也是單向綁定

• 雙向綁定：表單的v-model，用戶對(duì)View層的更改會(huì)直接同步到Model層

實(shí)際上v-model只是v-bind:value 和 v-on:input的語(yǔ)法糖，我們也可以采取類似react的單向綁定。兩者各有利弊，單向綁定清晰可控，但是模板代碼過(guò)多，雙向綁定可以簡(jiǎn)化開(kāi)發(fā)，但是也會(huì)導(dǎo)致數(shù)據(jù)變化不透明，優(yōu)缺點(diǎn)共存，大家可以根據(jù)情況使用。

單向數(shù)據(jù)流 vs 雙向數(shù)據(jù)流

數(shù)據(jù)流指的是組件之間的數(shù)據(jù)流動(dòng)。
Vue與React都是單向數(shù)據(jù)流的模型，雖然vue有雙向綁定v-model，但是vue和react父子組件之間數(shù)據(jù)傳遞，仍然還是遵循單向數(shù)據(jù)流的，父組件可以向子組件傳遞props，但是子組件不能修改父組件傳遞來(lái)的props，子組件只能通過(guò)事件通知父組件進(jìn)行數(shù)據(jù)更改，如圖所示：

通過(guò)單向數(shù)據(jù)流的模型，所有狀態(tài)的改變可記錄、可跟蹤，相比于雙向數(shù)據(jù)流可加容易維護(hù)與定位問(wèn)題

為什么說(shuō)v-model只是語(yǔ)法糖

你可以用 v-model 指令在表單 <input>、<textarea> 及 <select> 元素上創(chuàng)建雙向數(shù)據(jù)綁定。它會(huì)根據(jù)控件類型自動(dòng)選取正確的方法來(lái)更新元素。盡管有些神奇，但 v-model 本質(zhì)上不過(guò)是語(yǔ)法糖。它負(fù)責(zé)監(jiān)聽(tīng)用戶的輸入事件以更新數(shù)據(jù)，并對(duì)一些極端場(chǎng)景進(jìn)行一些特殊處理

正如上面所述，Vue文檔中說(shuō)v-model只是語(yǔ)法糖

<input v-model=“phoneInfo.phone”/>

//在組件中使用時(shí)，實(shí)際相當(dāng)于下面的簡(jiǎn)寫(xiě)
<input :value="PhoneInfo.phone" @input="val => { PhoneInfo.phone = val }"

那么問(wèn)題來(lái)了，為什么說(shuō)v-model不是真正的雙向數(shù)據(jù)流呢？按照這道理，是不是可以認(rèn)為model->view的單向數(shù)據(jù)流也是語(yǔ)法糖啊，也是vue作者通過(guò)一定方法實(shí)現(xiàn)的而已
真正的原因上面已經(jīng)說(shuō)了，數(shù)據(jù)綁定是View與Model之間的映射關(guān)系，數(shù)據(jù)流指的是組件之間的數(shù)據(jù)流動(dòng)v-model不是真正的雙向數(shù)據(jù)流，是因?yàn)樗荒苤苯有薷母附M件的值，比如你在v-model中綁定props中的值是會(huì)報(bào)錯(cuò)的，它只能綁定組件的值
而真正的雙向數(shù)據(jù)流，比如AngularJs，是允許在子組件中直接更新父組件的值的，這就是為什么說(shuō)v-model只是語(yǔ)法糖的原因

總結(jié)

總得來(lái)說(shuō)，單雙向數(shù)據(jù)綁定與數(shù)據(jù)流是兩個(gè)不同維度的概念，數(shù)據(jù)綁定是View與Model之間的映射關(guān)系，數(shù)據(jù)流指的是組件之間的數(shù)據(jù)流動(dòng)。因此，單向數(shù)據(jù)流也可有雙向綁定，雙向數(shù)據(jù)流也可以有雙向綁定，兩者不應(yīng)該混為一談

以上就是關(guān)于“Vue的雙向綁定和單向數(shù)據(jù)流有沒(méi)有沖突”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對(duì)大家有幫助，若想了解更多相關(guān)的知識(shí)內(nèi)容，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。