天天看點

單向資料流和雙向資料流及雙向資料綁定

在react中是單向資料綁定,而在vue中的特色是雙向資料綁定。但是其實就我個人的了解是:

其實無論是vue還是react其實還是提倡單向資料流去管理狀态,這一點在vuex和redux狀态管理器上展現的很明顯。隻是vue為UI控件提供了雙向資料綁定的方式,在一些需要實時反應使用者輸入的場合會非常友善。但通常認為複雜應用中這種便利比不上引入狀态管理帶來的優勢。

1.單向資料流

示意圖:

單向資料流和雙向資料流及雙向資料綁定

state:驅動應用的資料源。view:以聲明方式将 state 映射到視圖 。 actions:響應在 view 上的使用者輸入導緻的狀态變化

單向資料流指隻能從一個方向修改資料,姑且我們可以這樣了解,如下圖所示。一個父元件下有兩個子元件1和子元件2,父元件可以向子元件傳遞資料。假如子元件都擷取到了父元件的name,在子元件1中對name重新修改之後,子元件2和父元件中的值并不會發生改變,這正是因為Vue中的機制是單向資料流,子元件不能直接改變父元件的狀态。但反過來,如果是父元件中的name修改了,當然兩個子元件中的name也就改變了。

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.雙向資料綁定

主要是由MVVM架構實作:

單向資料流和雙向資料流及雙向資料綁定
  • Model與ViewModel之間的雙向關系

    Model通過Ajax通信,發送資料給ViewModel。

    ViewModel也可以通過Ajax通信,發送請求給Model。

  • ViewModel與View之間的雙向關系

    ViewModel中的資料改變,可以同時改變View上的顯示内容。

    View上的内容改變(比如輸入框中的内容),也可以同時改變ViewModel中對應的資料。

雙向資料綁定,帶來雙向資料流。ViewModel中的data部分和View之間的雙向關系。。

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

雙向資料流/雙向資料綁定:

1)js記憶體屬性改變,影響頁面變化

2)頁面的改變硬性js 記憶體屬性的改變
           

當資料發生變化的時候,使用者界面發生相應的變化,開發者不需要手動的去修改dom。

文章參考部落格:https://www.jianshu.com/p/810464f1a576

參考 mvvm的介紹: https://www.jianshu.com/p/e4e3519a58a6