看到網上很多人討論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 會在瀏覽器的控制台中發出警告。