首頁 > web前端 > Vue.js > 主體

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

青灯夜游
發布: 2022-04-14 21:17:58
轉載
2689 人瀏覽過

這篇文章帶大家了解一下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採取單向綁定,如圖所示:

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

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

單向綁定的方式的優點在於清晰可控,缺點則在於會有一些模板代碼,Vue則同時支援單向綁定和雙向綁定

    ##單向綁定定:內插形式
  • {{data}}v-bind也是單向綁定
  • 雙向綁定:表單的
  • v-model,使用者對View層的變更會直接同步到Model
#實際上

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

單向資料流vs<span style="font-size: 18px;"></span># 雙向資料流

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

VueReact都是單向資料流的模型,雖然vue有雙向綁定v-model,但是vuereact父子元件之間資料傳遞,仍然還是遵循單向資料流的,父元件可以向子元件傳遞props,但是子元件不能修改父元件傳遞來的props,子元件只能透過事件通知父元件進行資料更改,如圖所示:

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

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

##為什麼說 #v-model<span style="font-size: 18px;"></span>只是語法糖

#你可以用
v-model

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

正如上面所述,
Vue

文檔中說v-model 只是語法糖<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;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><div class="contentsignin">登入後複製</div></div>那麼問題來了,為什麼說

v-model

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

資料綁定是

ViewModel之間的映射關係,資料流指的是元件之間的資料流動

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

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

#總結

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

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

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


作者:程式設計師江同學

#(學習影片分享:

web前端開發程式設計入門

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

相關標籤:
來源:juejin.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!