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