摘要：所以，單向數(shù)據(jù)流的意思是指在變更檢測(cè)期間屬性綁定變更的架構(gòu)。相反，輸出綁定過(guò)程并沒(méi)有在變更檢測(cè)期間內(nèi)運(yùn)行，所以它沒(méi)有把單向數(shù)據(jù)流轉(zhuǎn)變?yōu)殡p向數(shù)據(jù)流。說(shuō)的單向數(shù)據(jù)流說(shuō)的是服務(wù)層，而不是視圖層嗷。

原文鏈接： Do you really know what unidirectional data flow means in?Angular

關(guān)于單向數(shù)據(jù)流，還可以參考這篇文章，且文中還有 youtube 視頻解析：Angular - What is Unidirectional Data Flow? Learn How the Angular Development Mode Works, why it"s important to use it and how to Troubleshoot it 。單向數(shù)據(jù)流一句話解釋就是：不要在 Angular 使用 Model 生成 View 這個(gè)過(guò)程中再去修改 Model。

大多數(shù)架構(gòu)模式是很難理解的，尤其是在相關(guān)資料很少時(shí)那就更加頭疼，比如 Angular 的單向數(shù)據(jù)流（unidirectional data flow）文檔資料就很少，即使官方文檔上，也僅僅在 表達(dá)式指南 和 模板表達(dá)式 兩小塊中略有提及。我也很少在網(wǎng)上搜到比較好的解釋文章，所以寫(xiě)此文是為了給 單向數(shù)據(jù)流（unidirectional data flow） 有個(gè)詳細(xì)的解釋。

在討論 AngularJS 和 Angular 性能異同點(diǎn)時(shí)，就經(jīng)常會(huì)提到單向數(shù)據(jù)流模式，它也是 Angular 比 AngularJS 性能更快的原因所在。讓我們一起看看單向數(shù)據(jù)流究竟咋回事吧?。ㄗg者注：AngularJS 指的是 1.X 版本，2+ 版本叫 Angular，使用 TypeScript 語(yǔ)言重寫(xiě)了框架，包括架構(gòu)模式進(jìn)行了重新設(shè)計(jì)，但兩者形似也神似。）

AngularJS 和 Angular 都是通過(guò)綁定來(lái)實(shí)現(xiàn)組件間數(shù)據(jù)通信，比如在 AngularJS 定義一個(gè)父組件 A：

app.component("aComponent", {
  controller: class ParentComponent() {
    this.value = {name: "initial"};
  },
  template: `
    
  `
});
----------------
app.component("bComponent", {
    bindings: {
        obj: "="
    },

可以看到父組件 A 有個(gè)子組件 B，并且通過(guò)輸入綁定把父組件 A 的 value 屬性值傳給子組件 B 的 obj 屬性：

這和 Angular 中組件間通信很類(lèi)似了啊：

@Component({
    template: `
        
    ...
export class AppComponent {
    value = {name: "initial"};
}
----------------
export class BComponent {
    @Input() obj;

第一件重要的事情是，Angular 和 AngularJS 都是在變更檢測(cè)（change detection）期間才去更新綁定值。所以，當(dāng) Angular 框架在為父組件 A 運(yùn)行變更檢測(cè)時(shí)，它會(huì)更新子組件 B 的 obj 屬性：

bComponentInstance.obj = aComponentInstance.value;

上面過(guò)程證明了單向數(shù)據(jù)流是數(shù)據(jù)從上往下流（譯者注：即數(shù)據(jù)從組件樹(shù)的父組件往子組件流），但是 AngularJS 卻不一樣，它可以允許在子組件中更新父組件的 value 屬性值：

app.component("parentComponent", {
  controller: function ParentComponent($timeout) {    
    $timeout(()=>{
      console.log(this.value); // logs {name: "updated"}
    }, 3000)
  }
----------------
  
app.component("childComponent", {
    controller: function ChildComponent($timeout) {      
      $timeout(()=>{
        this.obj = { name: "updated" };  
      }, 2000)

上面代碼你可以看到兩個(gè) timeout 回調(diào)，第一個(gè)回調(diào)會(huì)更新子組件屬性，第二個(gè)回調(diào)會(huì)延遲第一個(gè)回調(diào)一秒，檢查父組件屬性是否被更新。如果你在 AngularJS 中運(yùn)行上面代碼你會(huì)發(fā)現(xiàn)父組件屬性已經(jīng)被更新了。讓我們一起看看究竟發(fā)生了什么？

當(dāng)?shù)谝粋€(gè)回調(diào)運(yùn)行時(shí)，子組件 B 的 obj 屬性被更新為 {name: "updated"}，然后 AngularJS 運(yùn)行變更檢測(cè)。在變更檢測(cè)過(guò)程中，AngularJS 檢測(cè)到子組件綁定屬性的值發(fā)生改變，它會(huì)更新父組件 A 的 value 屬性值。這是 AngularJS 變更檢測(cè)的內(nèi)置功能。如果你在 Angular 中做同樣的事情，它僅僅更新子組件的屬性值，但是子組件的改變不會(huì)冒泡到父組件，即 Angular 不會(huì)改變父組件的屬性值。這是升級(jí)版后的 Angular 變更檢測(cè)實(shí)現(xiàn)，相較于 AngularJS 的最重大區(qū)別。然而，它卻困擾了我好久啊。

然而，Angular 也同樣可以通過(guò)子組件來(lái)更新父組件，這個(gè)機(jī)制就是輸出綁定（output binding）?？梢韵襁@樣使用輸出綁定：

@Component({
    template: `
        
Hello {{value.name}}
        
    ...
export class AppComponent {
    value = {name: "initial"};
    
    constructor() {
        setTimeout(() => {
            console.log(this.value); // logs {name: "updated"}
        }, 3000);
----------------
@Component({...})
export class AComponent {
    @Output() updateObj = new EventEmitter();
    
    constructor() {
        setTimeout(() => {
            this.updateObj.emit({name: "updated"});
        }, 2000);

我承認(rèn)這個(gè)和從子組件直接更新還不太一樣，但是父組件值的確是更新了啊。很長(zhǎng)一段時(shí)間我不明白為何這沒(méi)有被看做雙向數(shù)據(jù)綁定？畢竟，數(shù)據(jù)通信是在兩個(gè)方向進(jìn)行的。

直到有一晚我讀到了 Two Phases of Angular Applications?by?Victor Savkin，他解釋道（譯者注：為清晰理解，這個(gè)解釋不翻譯）：

Angular 2 separates updating the application model and reflecting the state of the model in the view into two distinct phases.?The developer is responsible for updating the application model. Angular, by means of change detection, is responsible for reflecting the state of the model in the view.
（譯者注：意思就是 Angular 劃分了更新程序 model在前 和 同步 model 和 view 在后兩個(gè)步驟，開(kāi)發(fā)者只需要關(guān)注更新程序 model，同步 model 和 view 由 Angular 框架負(fù)責(zé)，這個(gè)同步過(guò)程就是變更檢測(cè)，說(shuō)白了就是更新 view。）
（譯者注：比如朋友圈點(diǎn)贊，首先就是手指觸發(fā)異步事件來(lái)更新程序 model，如在 Post 組件里給 likes 屬性加 1，然后在下一個(gè) VM turn 時(shí) Angular 會(huì)自動(dòng)更新視圖中綁定的 likes 值， 即同步 model 和 view，點(diǎn)贊數(shù)就會(huì)從 0 變?yōu)?1。）

這讓我花費(fèi)好些天才明白，所謂的使用輸出綁定機(jī)制來(lái)更新父組件并不是在變更檢測(cè)中執(zhí)行的：

相反，它是在變更檢測(cè)前的更新程序 model 階段執(zhí)行的。所以，單向數(shù)據(jù)流的意思是指在變更檢測(cè)期間屬性綁定變更的架構(gòu)。在上面 Angular 代碼示例中，不像 AngularJS，在 Angular 變更檢測(cè)期間，并沒(méi)有代碼去讓子組件 AComponent 去更新父組件 AppComponent 的屬性。相反，輸出綁定過(guò)程并沒(méi)有在變更檢測(cè)期間內(nèi)運(yùn)行，所以它沒(méi)有把單向數(shù)據(jù)流轉(zhuǎn)變?yōu)殡p向數(shù)據(jù)流。

另外，盡管 Angular 沒(méi)有內(nèi)置機(jī)制可以使得在變更檢測(cè)期間去更新父組件，然而可以通過(guò)共享服務(wù)或廣播同步事件做到這一點(diǎn)。但是，由于 Angular 框架強(qiáng)迫單向數(shù)據(jù)流，所以這么做會(huì)導(dǎo)致ExpressionChangedAfterItHasBeenCheckedError 錯(cuò)誤。想要了解導(dǎo)致這個(gè)錯(cuò)誤的原因和解決方案可以參考 Everything you need to know about the ExpressionChangedAfterItHasBeenCheckedError。

你可能知道，大多數(shù) web 程序會(huì)設(shè)計(jì)成有兩層：視圖層和服務(wù)層。

Web 環(huán)境下視圖層主要通過(guò) DOM 結(jié)構(gòu)向用戶展示相關(guān)程序數(shù)據(jù)，在 Angular 中這一層是通過(guò)組件做的。服務(wù)層主要是處理和保存數(shù)據(jù)，正如上圖中展示的，這一層又被切分為狀態(tài)管理和一些基礎(chǔ)部分，如 rest 服務(wù)或可重用工具服務(wù)（helpers）。

上文中提到的單向數(shù)據(jù)流指的是視圖層，因?yàn)樗f(shuō)的是組件，而組件是用來(lái)構(gòu)建視圖的：

然而，在隨著實(shí)現(xiàn)了 redux 架構(gòu)的 ngrx 引入后，這又讓人迷惑了，因?yàn)?redux 文檔上有 這么一句（譯者注：為清晰理解，這句不翻譯）：

Redux architecture revolves around a?strict unidirectional data flow.
This means that all data in an application follows the same lifecycle pattern, making the logic of your app more predictable and easier to understand…

實(shí)際上，這個(gè)嚴(yán)格單項(xiàng)數(shù)據(jù)流（strict unidirectional data flow）其實(shí)說(shuō)的是服務(wù)層而不是視圖層。但我有時(shí)會(huì)搞混服務(wù)層和視圖層，會(huì)把 redux 的架構(gòu)模式與 Angular 的結(jié)構(gòu)模式聯(lián)系起來(lái)，當(dāng)然要避免搞混這兩層嗷。Redux 說(shuō)的單向數(shù)據(jù)流說(shuō)的是服務(wù)層，而不是視圖層嗷。 Redux 主要說(shuō)的是狀態(tài)管理模塊，會(huì)把我們上文說(shuō)的雙向數(shù)據(jù)流轉(zhuǎn)變?yōu)閱蜗驍?shù)據(jù)流。
把雙向數(shù)據(jù)流：

轉(zhuǎn)換為單向數(shù)據(jù)流：