前端三大框架：資料繫結與資料流
阿新 • • 發佈：2020-07-26
### 目錄
- 序言
- 單向資料繫結 vs 雙向資料繫結
- 單向資料流 vs 雙向資料流
- 資料流與資料繫結
- 參考
### 1. 序言 在前端三大主流的框架中，我們可能會經常聽到 React 是單向資料流，採用單向資料繫結，而 Vue 2.x 也是單向資料流，但同時支援單向資料繫結和雙向資料繫結，而 Angular 和 AngularJS 又有所不同，到底資料繫結與資料流之間有什麼關聯？單向資料繫結就等價於單向資料流嗎？支援雙向資料繫結就一定是雙向資料流嗎？這篇文章將理清在前端三大框架中資料繫結與資料流之間的關聯與區別。
*注：若以下文章中沒有特別指明 Vue 的版本，預設代表 Vue 2.x 。Angular 一般意義上是指 Angular 2 及以上版本，而 AngularJS 專指 Angular 的所有 1.x 版本。*
### 2. 單向資料繫結 vs 雙向資料繫結 > 所謂資料繫結，就是指`View`層和`Model`層之間的對映關係。
**單向資料繫結：**`Model`的更新會觸發`View`的更新，而`View`的更新不會觸發`Model`的更新，它們的作用是單向的。 **雙向資料繫結：**`Model`的更新會觸發`View`的更新，`View`的更新也會觸發`Model`的更新，它們的作用是相互的。 
**React 採用單向資料繫結**  當用戶訪問`View`時，通過觸發`Events`進行互動，而在相應`Event Handlers`中，會觸發對應的 `Actions`，而`Actions` 通過呼叫 `setState` 方法對`View`的` State` 進行更新，`State`更新後會觸發`View`的重新渲染。 可以看出，在 React 中，`View` 層是不能直接修改 `State`，必須通過相應的 `Actions` 來進行操作。
單向數繫結的優缺點： 優點：所有狀態變化都可以被記錄、跟蹤，狀態變化通過手動呼叫觸發，源頭易追溯。 缺點：會有很多類似的樣板程式碼，程式碼量會相應的上升。
**Vue 支援單向資料繫結和雙向資料繫結** - 單向資料繫結：使用`v-bind`屬性繫結、`v-on`事件繫結或插值形式`{{data}}`。 - 雙向資料繫結：使用`v-model`指令，使用者對`View`的更改會直接同步到`Model`。 Vue 的雙向資料繫結就是指使用`v-model`指令進行資料繫結，而`v-model`本質上是`v-bind`和`v-on`相組合的語法糖，是框架自動幫我們實現了更新事件。換句話說，我們完全可以採取單向繫結，自己實現類似的雙向資料繫結。
雙向數繫結的優缺點： 優點：在操作表單時使用`v-model`方便簡單，可以省略繁瑣或重複的`onChange`事件去處理每個表單資料的變化（減少程式碼量）。 缺點：屬於暗箱操作，無法追蹤區域性狀態的變化。
**Angular 支援單向資料繫結和雙向資料繫結** - 單向資料繫結：使用`[x]`屬性繫結、`(x)`事件繫結或插值形式`{{data}}`。 - 雙向資料繫結：使用`[(x)]`語法，使用者對`View`的更改會直接同步到`Model`。 除了語法上有所不同，Angular 雙向資料繫結與 Vue 類似，也是語法糖，`[(x)]` 語法結合了屬性繫結` [x]` 和事件繫結 `(x)`。
**AngularJS 支援單向資料繫結和雙向資料繫結** - 單向資料繫結：使用`ng-bind`指令或插值形式`{{data}}`。 - 雙向資料繫結：使用`ng-model`指令，使用者對`View`的更改會直接同步到`Model`。 AngularJS 的雙向資料繫結實現原理與 Angular 完全不同，其實現原理可以參考[這篇文章](https://cloud.tencent.com/developer/article/1174665)。
### 3. 單向資料流 vs 雙向資料流 > 所謂資料流，就是指的是元件之間的資料流動。
**React、Vue 以及 Angular 都只是單向資料流** 雖然 Vue 和 Angular 有雙向資料繫結，但 Vue 和 Angualr 父子元件之間資料傳遞，仍然遵循單向資料流，即父元件可以向子元件傳遞`props`，但是子元件不能修改父元件傳遞來的`props`，子元件只能通過事件通知父元件進行資料更改。如下圖所示： 
優點：由於元件資料傳遞只有唯一的入口和出口，使得程式更直觀、更容易理解，有利於程式的可維護性。
**AngularJS 支援雙向資料流** 所謂雙向資料流，就是指在子元件中可以直接更新父元件的資料。
缺點：由於元件資料變化的來源入口變得可能不止一個，如果缺乏相應的“管理”手段，容易將資料流轉方向弄得紊亂。同時也會增加了出錯時 debug 的難度。
### 4. 資料流與資料繫結 嚴格來說，資料流和資料繫結是兩個概念，並不是同一個東西。單向資料流也可以支援雙向資料繫結，雙向資料流也可以支援單向資料繫結。
簡單總結一下前端三大框架的資料流與資料繫結的區別： 
### 5. 參考 [Vue的單向資料流和雙向資料繫結不是衝突的嗎？](https://segmentfault.com/q/1010000019491720) [單向資料繫結和雙向資料繫結的優缺點](https://www.zhihu.com/question/49964363) [前端三大框架vue，angular，react大雜燴](https://cloud.tencent.com/developer/article/1020807)
### 1. 序言 在前端三大主流的框架中，我們可能會經常聽到 React 是單向資料流，採用單向資料繫結，而 Vue 2.x 也是單向資料流，但同時支援單向資料繫結和雙向資料繫結，而 Angular 和 AngularJS 又有所不同，到底資料繫結與資料流之間有什麼關聯？單向資料繫結就等價於單向資料流嗎？支援雙向資料繫結就一定是雙向資料流嗎？這篇文章將理清在前端三大框架中資料繫結與資料流之間的關聯與區別。
*注：若以下文章中沒有特別指明 Vue 的版本，預設代表 Vue 2.x 。Angular 一般意義上是指 Angular 2 及以上版本，而 AngularJS 專指 Angular 的所有 1.x 版本。*
### 2. 單向資料繫結 vs 雙向資料繫結 > 所謂資料繫結，就是指`View`層和`Model`層之間的對映關係。
**單向資料繫結：**`Model`的更新會觸發`View`的更新，而`View`的更新不會觸發`Model`的更新，它們的作用是單向的。 **雙向資料繫結：**`Model`的更新會觸發`View`的更新，`View`的更新也會觸發`Model`的更新，它們的作用是相互的。 
**React 採用單向資料繫結**  當用戶訪問`View`時，通過觸發`Events`進行互動，而在相應`Event Handlers`中，會觸發對應的 `Actions`，而`Actions` 通過呼叫 `setState` 方法對`View`的` State` 進行更新，`State`更新後會觸發`View`的重新渲染。 可以看出，在 React 中，`View` 層是不能直接修改 `State`，必須通過相應的 `Actions` 來進行操作。
單向數繫結的優缺點： 優點：所有狀態變化都可以被記錄、跟蹤，狀態變化通過手動呼叫觸發，源頭易追溯。 缺點：會有很多類似的樣板程式碼，程式碼量會相應的上升。
**Vue 支援單向資料繫結和雙向資料繫結** - 單向資料繫結：使用`v-bind`屬性繫結、`v-on`事件繫結或插值形式`{{data}}`。 - 雙向資料繫結：使用`v-model`指令，使用者對`View`的更改會直接同步到`Model`。 Vue 的雙向資料繫結就是指使用`v-model`指令進行資料繫結，而`v-model`本質上是`v-bind`和`v-on`相組合的語法糖，是框架自動幫我們實現了更新事件。換句話說，我們完全可以採取單向繫結，自己實現類似的雙向資料繫結。
雙向數繫結的優缺點： 優點：在操作表單時使用`v-model`方便簡單，可以省略繁瑣或重複的`onChange`事件去處理每個表單資料的變化（減少程式碼量）。 缺點：屬於暗箱操作，無法追蹤區域性狀態的變化。
**Angular 支援單向資料繫結和雙向資料繫結** - 單向資料繫結：使用`[x]`屬性繫結、`(x)`事件繫結或插值形式`{{data}}`。 - 雙向資料繫結：使用`[(x)]`語法，使用者對`View`的更改會直接同步到`Model`。 除了語法上有所不同，Angular 雙向資料繫結與 Vue 類似，也是語法糖，`[(x)]` 語法結合了屬性繫結` [x]` 和事件繫結 `(x)`。
**AngularJS 支援單向資料繫結和雙向資料繫結** - 單向資料繫結：使用`ng-bind`指令或插值形式`{{data}}`。 - 雙向資料繫結：使用`ng-model`指令，使用者對`View`的更改會直接同步到`Model`。 AngularJS 的雙向資料繫結實現原理與 Angular 完全不同，其實現原理可以參考[這篇文章](https://cloud.tencent.com/developer/article/1174665)。
### 3. 單向資料流 vs 雙向資料流 > 所謂資料流，就是指的是元件之間的資料流動。
**React、Vue 以及 Angular 都只是單向資料流** 雖然 Vue 和 Angular 有雙向資料繫結，但 Vue 和 Angualr 父子元件之間資料傳遞，仍然遵循單向資料流，即父元件可以向子元件傳遞`props`，但是子元件不能修改父元件傳遞來的`props`，子元件只能通過事件通知父元件進行資料更改。如下圖所示： 
優點：由於元件資料傳遞只有唯一的入口和出口，使得程式更直觀、更容易理解，有利於程式的可維護性。
**AngularJS 支援雙向資料流** 所謂雙向資料流，就是指在子元件中可以直接更新父元件的資料。
缺點：由於元件資料變化的來源入口變得可能不止一個，如果缺乏相應的“管理”手段，容易將資料流轉方向弄得紊亂。同時也會增加了出錯時 debug 的難度。
### 4. 資料流與資料繫結 嚴格來說，資料流和資料繫結是兩個概念，並不是同一個東西。單向資料流也可以支援雙向資料繫結，雙向資料流也可以支援單向資料繫結。
簡單總結一下前端三大框架的資料流與資料繫結的區別： 
### 5. 參考 [Vue的單向資料流和雙向資料繫結不是衝突的嗎？](https://segmentfault.com/q/1010000019491720) [單向資料繫結和雙向資料繫結的優缺點](https://www.zhihu.com/question/49964363) [前端三大框架vue，angular，react大雜燴](https://cloud.tencent.com/developer/article/1020807)