---
# System prepended metadata

title: 單向資料流、雙向資料流

---

# 單向資料流、雙向資料流

**本文作者學習筆記網站：https://dev.rraiy.cc/**

＊本篇主旨：被面試官問到單向跟雙向的差異，於是做了一些研究，本篇重點放在兩者的差異以及他們與三大框架的關係

### 什麼是資料流、資料綁定？

::: info
資料流 data flow 跟 data binding 資料綁定 是否一樣？
:::

從官方文件來看，確實會把這兩個單詞一起講，看起來像同個事情

> React’s one-way data flow (also called one-way binding) keeps everything modular and fast.


React 官方文件，我個人是解讀為「 React 容易做到單向資料流、以及單向資料綁定」

> So the Data Flow that we are referring to in the term Unidirectional Data Flow is the flow of application data that goes from the component classes into the output DOM data structures generated by the rendering process, during the top to bottom rendering sweep of the component tree.

Angular 官方把 data flow 解讀為組件與畫面的渲染過程(相當於 data binding)


:::warning
但對我的理解而言，嚴格來說我覺得他們所表達的是不同概念，這樣的想法讓我比較好想通關於「Vue 單向資料流、卻容易做到雙向綁定」這件事
:::


#### **data flow**：組件間數據的流向，例如 React 中，props 只能由父給子
#### **data binding** ：畫面 View 與 資料 Model 之間的綁定關係

例如 React 中，只能由 model 更新來渲染 view (單向綁定)
但在 Vue 的表單操作可以由 view 來更新 model (雙向綁定)

---

### data flow 資料流
- 目前三大框架都是單向資料流，這邊指的 Angular 是 2 以上的版本
- Vue 1.0 、 AngularJS 為雙向資料流 (補：AngularJS 為所有 1.x 版本)，子組件可以更新父組件的數據，同時代表變動的入口不只一個，如果沒有管理好就會難以 debug
- 單向資料流優缺點：
優 - 只有一個變更入口 → 直觀、可維護性高
缺 - 資料流過用不到的階層，所以才需要 Redux、Vuex 協助、要寫很多代碼

---

###  data binding 資料綁定
畫面與資料之間的操作關聯有兩種：

- data model 的變動去更新 UI
- UI 的變動去更新 data model

若能做到其中之一，就是達成 one way data binding
若兩個都能做到，則是 two way data binding

因為我們對 React 還蠻熟悉，這邊分享比較不同的 Vue 的雙向綁定。

請先記得： **Vue 同時支持單向綁定跟雙向綁定**

Vue 的雙向綁定主要是針對*表單事件的 v-model 語法*，但其實 v-model 是結合 v-bind 跟 v-on 的語法糖，只不過是框架幫我們實現自動更新。

使用 v-model ，用戶在 UI 元件上的更改會直接同步到 model，而不是通過 onChange 事件去監聽。
![](https://i.imgur.com/wQcPyHR.png)

---
#### **本文作者學習筆記網站：https://dev.rraiy.cc/**
---

參考資料
[https://kuro.tw/posts/2019/07/31/談談前端框架/](https://kuro.tw/posts/2019/07/31/%E8%AB%87%E8%AB%87%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/)
[https://devs.tw/post/40](https://devs.tw/post/40)
https://blog.angular-university.io/angular-2-what-is-unidirectional-data-flow-development-mode/