vue 單向資料流雙向繫結

在react中是單向資料繫結，而在vue中的特色是雙向資料繫結。但是其實就我個人的理解是：

其實無論是vue還是react其實還是提倡單向資料流去管理狀態，這一點在vuex和redux狀態管理器上體現的很明顯。只是vue為ui控制項提供了雙向資料繫結的方式，在一些需要實時反應使用者輸入的場合會非常方便。但通常認為複雜應用中這種便利比不上引入狀態管理帶來的優勢。

1.單向資料流

「單向資料流」理念的極簡示意：

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控制項中(通常是類表單操作)。

vue 單向資料流 雙向繫結