angular vs vue vs react

[yangchongduo]

angular1和vue都是利用观察者模式，但是触发之后做了不一样了

angular1

ng-click会触发一次digest 脏检查开始 ，源码如何实现的呢(两个while的循环)；触发每个watcher 这个是非常消耗性能；
for循环肯定比 vue 的观者着消耗性能，这是必须的------- 计算和上一次的值是否相等，太过于依赖。

angular2

彻底重写了angular1的实现方式，使用es7的decorate装饰者模式（借鉴了python）。力推typeScript。组件的书写不在像react那样通过extends继承

react: diff算法，虚拟dom（普通的javascript对象）

diff算法:（两个对象比较）
react的diff算法用在什么地方呢？当组件更新的时候，react会创建一个新的虚拟dom树并且会和之前储存的dom树进行比较，这个比较多过程就用到了diff算法，所以组件初始化的时候是用不到的。react提出了一种假设，相同的节点具有类似的结构，而不同的节点具有不同的结构。在这种假设之上进行逐层的比较，如果发现对应的节点是不同的，那就直接删除旧的节点以及它所包含的所有子节点然后替换成新的节点。如果是相同的节点，则只进行属性的更改。

对于列表的diff算法稍有不同，因为列表通常具有相同的结构，在对列表节点进行删除，插入，排序的时候，单个节点的整体操作远比一个个对比一个个替换要好得多，所以在创建列表的时候需要设置key值，这样react才能分清谁是谁。当然不写key值也可以，但这样通常会报出警告，通知我们加上key值以提高react的性能。

vue（原理）

Vue.js在这里主要做了三件事：
通过 Observer 对 data 做监听，并且提供了订阅某个数据项变化的能力。
把 template 编译成一段 document fragment，然后解析其中的 Directive，得到每一个 Directive 所依赖的数据项和update方法。
通过Watcher把上述两部分结合起来，即把Directive中的数据依赖通过Watcher订阅在对应数据的 Observer 的 Dep 上。
当数据变化时，就会触发 Observer 的 Dep 上的 notify 方法通知对应的 Watcher 的 update，进而触发 Directive 的 update 方法来更新 DOM 视图，
最后达到模型和视图关联起来。

ssr服务端渲染

各框架都有各种的实现方式，原理第一屏:后端渲染，页面交互前端渲染

总结

三个框架的实现原理大同小异，都是mvvm方式，通过对比react和vue，react学习成本确实要比vue大很多，react需要多方配置中间件（thunk-middle，promise-middle）才能行云流水，redux比起vuex数据层次比较清晰，vuex有些乱，没有中间件的概念。vue2也有虚拟dom，都是一个性质。没有太大区别。服务于业务才可以。node才是王道