angular(1)、vue、react三大框架比较

每个框架的历史

Angular是一个由Google支持的基于TypeScript的JavaScript框架。

React是一个用于构建web应用程序UI组件的JavaScript库。由Facebook维护。

Vue是前谷歌员工Evan You创建，它能够使用HTML，CSS和JavaScript构建有吸引力的UI。被阿里巴巴，GitLab，百度使用。

单向数据流与双向数据绑定

Angular使用双向数据绑定，React用于单数据流，Vue支持两者

Mircoapps和微服务的崛起

React和Vue可以灵活的选择对应用程序很重要的东西。您只需将所需的库添加到React和Vue中的源代码中。Angular使用TypeScript，因而它更适合SPA而不是微服务。React和Vue都为开发微应用程序和微服务提供了更大的灵活性。

Angular,React和Vue底层原理

Angular

实现双向绑定原理：AngularJs为scope模型上设置了一个监听队列，用来监听数据变化并更新view。每次绑定一个东西到view(html)上时AngularJs就会往$watch队列里插入一条$watch,用来检测它监视的model里是否有变化的东西。当浏览器接收到可以被angular context处理的事件时，$digest循环就会触发。$digest会遍历所有的$watch。从而更新DOM。这就是脏检查机制。

$apply  angular context外发布model变化的消息，以前项目里将接口的请求封装到promise对象里，then返回的数据需要手动调用$scope.$apply()更新model的数据。

$watch  监听model是否发生了变化 $scope.$watch(model变量，function(newvalue,oldvalue)=>{})

React

其基本原理就是：所有在JSX声明的事件都会被委托在顶层document节点上，并根据事件名和组件名存回调函数(listenerBank)。每次当某个组件触发事件时，在document节点上绑定的监听函数(dispatchEvent)就会找到这个组件和它的所有父组件(ancestors),对每个组件创建对应React合成事件(SyntheticEvent)并批处理(runEventQueueInBatch(events))，从而根据事件名和组件名调用(invokeGuardedCallback)回调函数。(实现了事件委托)。

Vue

实现双向绑定的原理：采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。