单向数据流和双向数据流

Posted 2022-12-12 火腿肠烧烤大赛冠军

单向数据流和双向数据流

单向数据流：

单向，可以想象城一棵dom树自上而下渲染数据，上方数据改动会引发下面所有用到数据的改动，而下方数据改动不会影响上方（类似父子组件的概念）

双向数据流：

类似于Vue的双向数据绑定，一个数据更改，会默认引发其他数据的更改

优缺点：

单向数据绑定的优缺点

优点

1、所有状态的改变可记录、可跟踪，源头易追溯。
2、所有数据只有一份，组件数据只有唯一的入口和出口，使得程序更直观更容易理解，有利于应用的可维护性。
3、一旦数据变化，就去更新页面（data-页面），但是没有（页面-data）
4、如果用户在页面上做了变动，那么就手动收集起来（双向是自动），合并到原有的数据中。

缺点

1、html代码渲染完成，无法改变，有新数据，就需把旧HTML代码去掉，整合新数据和模板重新渲染。
2、代码量上升，数据流转过程变长，出现很多类似的样板代码。
3、同时由于对应状态独立管理的严格要求（单一的全局store），在处理局部状态较多的场景时（如用户输入交互较多的“富表单型”应用），会显得啰嗦及繁琐。

双向数据绑定的优缺点

优点

1、用户在视图上的修改会自动同步到数据模型中去，数据模型中值的变化也会立刻同步到视图中去。
2、无需进行和单向数据绑定的那些相关操作。
3、在表单交互较多的场景下，会简化大量业务无关的代码。

缺点

1、无法追踪局部状态的变化。
2、“暗箱操作”，增加了出错时debug的难度。
3、由于组件数据变化来源入口变得可能不止一个，数据流转方向易紊乱，若在缺乏“管制”手段，血崩。