了解vue中的單項資料流和雙向資料綁定，兩種衝突嗎？

這篇文章帶大家了解一下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-model

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

正如上面所述，

Vue

文檔中說v-model 只是語法糖<pre class='brush:php;toolbar:false;'>&lt;input v-model=“phoneInfo.phone”/&gt; //在组件中使用时，实际相当于下面的简写 &lt;input :value=&quot;PhoneInfo.phone&quot; @input=&quot;val =&gt; { PhoneInfo.phone = val }&quot;</pre>那麼問題來了，為什麼說

v-model

不是真正的雙向資料流呢？依照這個道理，是不是可以認為model->view的單向資料流也是語法糖啊，也是vue作者透過一定方法實現的而已真正的原因上面已經說了，

資料綁定是

View與Model之間的映射關係，資料流指的是元件之間的資料流動

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

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

#總結

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

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

作者：程式設計師江同學

#（學習影片分享：

web前端開發、程式設計入門）

以上是了解vue中的單項資料流和雙向資料綁定，兩種衝突嗎？的詳細內容。更多資訊請關注PHP中文網其他相關文章！