数据流

数据流，表明的是数据流向或数据传递。

一、单向数据流

1. 什么是单向数据流？

单向数据流（Unidirectional data flow）方式使用一个上传数据流和一个下传数据流进行双向数据通信，两个数据流之间相互独立。单向数据流指只能从一个方向来修改状态。

image.png

2. Vue 中的单向数据流

对于 Vue 来说，组件之间的数据传递具有单向数据流这样的特性。

  1. 父组件总是通过 props 向子组件传递数据；
  2. 所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定；
  3. 父级 prop 的更新会向下流动到子组件中，但是反过来则不行；
  4. 这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解；
  5. 每次父级组件发生更新时，子组件中所有的 prop 都将会刷新为最新的值；
  6. 这意味着不应该在一个子组件内部改变 prop。如果这样做，Vue 会在浏览器的控制台中发出警告。

3. 单向数据流 - 优点

  1. 所有状态的改变可记录、可跟踪，源头易追溯；
  2. 所有的数据，具有唯一出口和入口，使得数据操作更直观更容易理解，可维护性强；
  3. 当数据变化时，页面会自动变化
  4. 当你需要修改状态，完全重新开始走一个修改的流程。这限制了状态修改的方式，让状态变得可预测，容易调试。

4. 单向数据流 - 缺点

  1. 页面渲染完成后，有新数据不能自动更新，需要手动整合新数据和模板重新渲染
  2. 代码量上升，数据流转过程变长，代码重复性变大
  3. 由于对应用状态独立管理的严格要求(单一的全局 store，如：Vuex)，在处理局部状态较多的场景时(如用户输入交互较多的“富表单型”应用)，会显得啰嗦及繁琐。

二、双向数据流

1. 什么是双向数据流？

在双向数据流中，Model（可以理解为状态的集合） 中可以修改自己或其他Model的状态， 用户的操作（如在输入框中输入内容）也可以修改状态。（双向数据流也可以叫双向数据绑定）

当我们在前端开发中采用 MV* 的模式时，M - model，指的是模型，也就是数据，V - view，指的是视图，也就是页面展现的部分。

将从服务器获取的数据进行“渲染”，展现到视图上。每当数据有变更时，我们会再次进行渲染，从而更新视图，使得视图与数据保持一致

image.png

页面也会通过用户的交互，产生状态、数据的变化，这个时候，我们则编写代码，将视图对数据的更新同步到数据

image.png

2. 双向数据流 - 优点

  1. 数据模型变化与更新，会自动同步到页面上，用户在页面的数据操作，也会自动同步到数据模型
  2. 无需进行和单向数据绑定的那些相关操作；
  3. 在表单交互较多的场景下，会简化大量业务无关的代码。

3. 双向数据流 - 缺点

  1. 无法追踪局部状态的变化；
  2. “暗箱操作”，增加了出错时 debug 的难度；
  3. 由于组件数据变化来源入口变得可能不止一个，数据流转方向易紊乱。
  4. 改变一个状态有可能会触发一连串的状态的变化，最后很难预测最终的状态是什么样的。使得代码变得很难调试

作者：lubinbin
链接：https://juejin.cn/post/6999826653803184135
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。