了解vue中的單項資料流和雙向資料綁定，兩種衝突嗎？
- 青灯夜游轉載
- 2022-04-14 21:17:582704瀏覽
這篇文章帶大家了解一下vue中的單一資料流和雙向資料綁定，分析一下Vue的雙向綁定和單向資料流衝突嗎？希望對大家有幫助！
眾所周知，Vue中更推薦單向資料流的狀態管理模式(例如Vuex)，但 Vue同時支援透過v-model實現雙向資料綁定。 （學習影片分享：vuejs教學）
那麼問題來了，單一資料流和雙向資料綁定的概念，這兩種不是相互衝突的嗎？即然能用v-model雙向資料綁定，不應該就是雙向資料流了嗎？
本文主要包括以下內容
單向綁定
vs雙向綁定單向資料流
vs雙向資料流為什麼說
v-model只是語法糖
單向綁定<span style="font-size: 18px;">vs</span> 雙向綁定
單雙向綁定，指的是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<span style="font-size: 18px;"></span># 雙向資料流
Vue與React都是單向資料流的模型，雖然vue有雙向綁定v-model，但是vue和react父子元件之間資料傳遞，仍然還是遵循單向資料流的，父元件可以向子元件傳遞props，但是子元件不能修改父元件傳遞來的props，子元件只能透過事件通知父元件進行資料更改，如圖所示：
##為什麼說 #v-model<span style="font-size: 18px;"></span>只是語法糖
v-modelVue指令在表單
正如上面所述，<input>、<textarea></textarea>及<select></select>元素上建立雙向資料綁定。它會根據控制項類型自動選取正確的方法來更新元素。儘管有些神奇，但v-model本質上不過是語法糖。它負責監聽用戶的輸入事件以更新數據，並對一些極端場景進行一些特殊處理
文檔中說v-model 只是語法糖<pre class="brush:js;toolbar:false;"><input v-model=“phoneInfo.phone”/>
//在组件中使用时，实际相当于下面的简写
<input :value="PhoneInfo.phone" @input="val => { PhoneInfo.phone = val }"</pre>那麼問題來了，為什麼說
不是真正的雙向資料流呢？依照這個道理，是不是可以認為model->view的單向資料流也是語法糖啊，也是vue作者透過一定方法實現的而已真正的原因上面已經說了，
View與 而真正的雙向資料流，例如 #總結 總得來說，單雙向資料綁定與資料流是兩個不同維度的概念，資料綁定是 Model之間的映射關係，資料流指的是元件之間的資料流動 v-model不是真正的雙向資料流，是因為它不能直接修改父元件的值，例如你在v-model中綁定props中的值是會報錯的，它只能綁定元件的值AngularJs，是允許在子元件中直接更新父元件的值的，這就是為什麼說v-model只是語法糖的原因View與Model之間的映射關係，資料流指的是元件之間的數據流動。因此，單向資料流也可有雙向綁定，雙向資料流也可以有雙向綁定，兩者不應該混為一談
##本文轉載自：https://juejin.cn/post/7085139499767840782
#（學習影片分享：
以上是了解vue中的單項資料流和雙向資料綁定，兩種衝突嗎？的詳細內容。更多資訊請關注PHP中文網其他相關文章！