美文网首页ReactNativeVue
angular(1)、vue、react三大框架比较

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

作者: 琴先森的博客 | 来源:发表于2019-02-28 14:45 被阅读430次

    每个框架的历史

    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,在数据变动时发布消息给订阅者,触发相应的监听回调。

    相关文章

      网友评论

        本文标题:angular(1)、vue、react三大框架比较

        本文链接:https://www.haomeiwen.com/subject/uvygyqtx.html