vue 雙向數據綁定與單向數據流


看到網上很多人討論vue是雙向數據綁定,怎么又是單向數據流呢? 其實,這兩個是不同的概念,雙向綁定是model改變view自動更新,view改變model自動更新;而單向數據流指的父組件傳值給子組件,子組件不能修改這個值,二父組件修改這個值的話子組件也會受影響,這個影響是單向的,只能從父組件流向子組件,不能反向。

雙向數據綁定

 vue支持雙向數據綁定和單向數據綁定

單雙向綁定,指的是View層和Model層之間的映射關系。
  • 單向綁定:插值形式{{data}},v-bind也是單向綁定
  • 雙向綁定:表單的v-model,用戶對View層的更改會直接同步到Model層

實際上v-model只是v-bind:value 和 v-on:input的語法糖,我們也可以采取類似react的單向綁定。
vue的v-model在操作表單是,顯得很簡單,我們不用去寫繁瑣的onChange事件去處理每個表單數據的變化,但是雙向綁定也會導致數據變化不透明,不清晰可控。優點和缺點共存,有時候一個人的優點也是一個人的缺點,道理都是相通的。

react是單向數據綁定

單向數據流

數據流指的是組件之間的數據流動。

react和vue都是單向數據流

所有的 prop 都使得其父子 prop 之間形成了一個單向下行綁定:父級 prop 的更新會向下流動到子組件中,但是反過來則不行。這樣會防止從子組件意外變更父級組件的狀態,從而導致你的應用的數據流向難以理解。

額外的,每次父級組件發生變更時,子組件中所有的 prop 都將會刷新為最新的值。這意味着你不應該在一個子組件內部改變 prop。如果你這樣做了,Vue 會在瀏覽器的控制台中發出警告。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM