三大前端框架的数据流

三大前端框架 Angular React Vue

三大前端框架的数据流

• Angular 使用双向绑定即：界面的操作能实时反映到数据，数据的变更能实时展现到界面。因dirty check，digest loop会导致性能问题
• Vue 也支持双向绑定，默认为单向绑定，数据从父组件单向传给子组件。在大型应用中使用单向绑定让数据流易于理解。Vue.js 有更好的性能，并且非常非常容易优化，因为它不使用脏检查。它使用基于依赖追踪的观察系统并且异步列队更新，所有的数据变化都是独立地触发。除非它们之间有明确的依赖关系，唯一需要做的优化是在 v-for 上使用 track-by
• React单向数据流，React推崇的是函数式编程和单向数据流：给定原始界面（或数据），施加一个变化，就能推导出另外一个状态（界面或者数据的更新）

Dirty checking 脏数据检查

是监测数据变化时，一种耗性能的处理机制

dirty check源于angularJS，
脏数据也就是产生了变化的数据
脏检查因一个原因而被称为脏：在AngularJS中，监测数据变化时，在某些情况？下制定策略，通过复制保存一份数据，进行快照对比，来监测变化。它定时检查而不是直接监听属性变化。我们把这个检查称为摘要周期(digest)。
Angular 1的性能被广为诟病，因为在 Angular 1 的机制下，脏检查的执行范围过大以及频率太过 频繁了。

脏检查慢吗？
说实话脏检查效率是不高，但是也谈不上有多慢。简单的数字或字符串比较能有多慢呢？十几个表达式的脏检查可以直接忽略不计；上百个也可以接受；成百上千个就有很大问题了。

建议注意以下几点：1.表达式（以及表达式所调用的函数）中少写太过复杂的逻辑；2.不要连接太长的 filter（往往 filter 里都会遍历并且生成新数组）；3.不要访问 DOM 元素
解决方案：1.使用单次绑定减少绑定表达式数量；2.善用 ng-if 减少绑定表达式的数量

脏检查这个东西，其实在三大主流前端框架中或多或少都有涉及
React 每次生成新的 Virtual DOM，与旧 Virtual DOM的 diff 操作本来就可以看做一次脏检查。
Vue 从相对彻底的抛弃了脏检查机制，使用真实 DOM 作为模板，数据绑定到真实节点，使用Property主动触发UI更新，但是Vue仍然不能抛弃track by 用来标记数组元素的key)这个东西。通过将新旧数组的track by元素做diff猜测用户的行为，最大可能的减少DOM树的操作，这就是track by的用处。

博主总结：假设教室玻璃碎了，（参考https://www.cnblogs.com/eret9616/p/9155675.html）

Angular1是 老师对学生们进行一一排查( 脏检测 )，看看是谁。

vue是学生主动站出来,是我，因为我的手破了，啊！（notify）好疼！（主动上报）