vue 單向數據流 & 雙向綁定


在react中是單向數據綁定,而在vue中的特色是雙向數據綁定。但是其實就我個人的理解是:
其實無論是vue還是react其實還是提倡單向數據流去管理狀態,這一點在vuex和redux狀態管理器上體現的很明顯。只是vue為UI控件提供了雙向數據綁定的方式,在一些需要實時反應用戶輸入的場合會非常方便。但通常認為復雜應用中這種便利比不上引入狀態管理帶來的優勢


1.單向數據流

“單向數據流”理念的極簡示意:

 
image.png

state:驅動應用的數據源。view:以聲明方式將 state 映射到視圖 。 actions:響應在 view 上的用戶輸入導致的狀態變化

1.1 單向數據流過程:
簡單的單向數據流(unidirectional data flow)是指用戶訪問View,View發出用戶交互的Action,在Action里對state進行相應更新。state更新后會觸發View更新頁面的過程。這樣數據總是清晰的單向進行流動,便於維護並且可以預測。

1.2 vuex和redux解決什么問題:
雖然vue和react框架本身有自己狀態管理,當我們的應用遇到多個組件共享狀態時,單向數據流的簡潔性很容易被破壞

(1)多個視圖依賴於同一狀態
(2)來自不同視圖的行為需要變更同一狀態

對於問題一,傳參的方法對於多層嵌套的組件將會非常繁瑣,並且對於兄弟組件間的狀態傳遞無能為力。
對於問題二,我們經常會采用父子組件直接引用或者通過事件來變更和同步狀態的多份拷貝。以上的這些模式非常脆弱,通常會導致無法維護的代碼。

因此,我們為什么不把組件的共享狀態抽取出來,以一個全局單例模式管理呢?在這種模式下,我們的組件樹構成了一個巨大的“視圖”,不管在樹的哪個位置,任何組件都能獲取狀態或者觸發行為!
另外,通過定義和隔離狀態管理中的各種概念並強制遵守一定的規則,我們的代碼將會變得更結構化且易維護。

1.3 特點:
(1) 所有狀態的改變可記錄、可跟蹤,源頭易追溯;
(2) 所有數據只有一份,組件數據只有唯一的入口和出口,使得程序更直觀更容易理解,有利於應用的可維護性;
(3) 一旦數據變化,就去更新頁面(data-頁面),但是沒有(頁面-data);
(4) 如果用戶在頁面上做了變動,那么就手動收集起來(雙向是自動),合並到原有的數據中。


2.雙向數據流

雙向數據綁定,帶來雙向數據流。數據(state)和視圖(View)之間的雙向綁定。

ng 里的 ng-model 和 vue 里的 v-model。

說到底就是 (value 的單向綁定 + onChange 事件偵聽)的一個語法糖,你如果不想用 v-model,像 React 那樣處理也是完全可以的。

2.1 特點:
無論數據改變,或是用戶操作,都能帶來互相的變動,自動更新。適用於項目細節,如:UI控件中(通常是類表單操作)。

 

參考資料:

https://github.com/vuejs/vuex/blob/master/docs/zh-cn/forms.md

https://www.jianshu.com/p/810464f1a576


免責聲明!

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



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