每个框架的历史
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,在数据变动时发布消息给订阅者,触发相应的监听回调。
网友评论