zoukankan      html  css  js  c++  java
  • 三种Web前端框架比较与介绍--Vue, react, angular

     

    一、Angular

    1、MVVM(Model)(View)(View-model);

    2、模块化(Module)控制器(Contoller)依赖注入;

    3、双向数据绑定:界面的操作能实时反映到数据,数据的变更能实时展现到界面;

    4、指令(ng-click ng-model ng-href ng-src ng-if...);

    5、服务Service($compile $filter $interval $timeout $http...)。

    备注:

    (1) api比较全,功能比较完善。关于数据绑定,使用双向绑定,但是vue不同组件间强制使用单向数据流。
    同时关于性能方面:angular观察数据是使用脏检查,而vue是使用基于依赖追踪的观察系统并且异步更新,左右的数据变化都是独立触发。

    (2) 学习曲线非常陡峭,api面积相对于vue大很多,但angular适合构建复杂的大型应用。

    二、React

    React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设Instagram 的网站。做出来以后,发现这套东西很好用,就在2013年5月开源了。

    这个项目本身也越滚越大,从最早的UI引擎变成了一整套前后端通吃的 Web App 解决方案。衍生的 React Native 项目,目标更是宏伟,希望用写 Web App 的方式去写 Native App。如果能够实现,整个互联网行业都会被颠覆,因为同一组人只需要写一次 UI ,就能同时运行在服务器、浏览器和手机。

    React主要用于构建UI。你可以在React里传递多种类型的参数,如声明代码,帮助你渲染出UI、也可以是静态的HTML DOM元素、也可以传递动态变量、甚至是可交互的应用组件。

    三、Vue

    Vue.js是一个轻巧、高性能、可组件化的MVVM库,同时拥有非常容易上手的API实现响应的数据绑定和组合的视图组件。核心是一个响应的数据绑定系统。;

    Vue.js是一个构建数据驱动的Web界面的库。

    Vue.js是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合。另一方面,Vue 完全有能力驱动采用单文件组件和 Vue 生态系统支持的库开发的复杂单页应用。数据驱动+组件化的前端开发。

    特点:

    1、模块化,目前最热的方式是在项目中直接使用ES6的模块化,结合Webpack进行项目打包;

    2、组件化,创造单个component后缀为.vue的文件,包含template(html代码),script(es6代码),style(css样式);

    3、路由。

    四、比较

    1 angular和vue的差别

      Angular是mvvm框架, 而vue是一个渐进式的框架, 相当于view层, 都有双向数据绑定,  但是angular中的双向数据绑定是基于脏检查机制, vue的双向数据绑定是基于ES5的getter和setter来实现, 而angular是有自己实现一套模板编译规则,vue比angular更轻量, 性能上更高效, 比angular更容易上手, 学习成本低, vue需要一个el对象进行实例化, 而angular是整个html页面下的,单页面应用, 而vue可以有过个vue实例;

    注:angular可以进行自动化的测试,就是一般做移动端应用时,ui-router路由方面难以处理,经常出错,这块是一个大坑。

    2  Vue & React

    整体上看Vue与react比较,相同之处在于:
    - 都使用了virtual DOM
    - 提供了响应式和组件化的视图组件
    - 将注意力集中在核心库,而将其他功能如路由和全局状态管理交给相关的库

    在性能方面,React中,某个组件发生变化,它会以该组件为根,重新渲染整个组件子树。而在Vue组件的依赖是在渲染过程中自动追踪的,所有能知道哪个组件确实需要被渲染。

    在模板方面,vue中html,css,js是分开的,而react中所有组件渲染都依靠JSX,HTML,css,js都是利用jsx.

    在规模方面的话,vue和react都提供了强大的路由来应对大型应用。在状态管理方面,分别使用vuex和Redux来进行全局状态管理。vue的生态系统库没有react繁荣。

    同时react学习曲线陡峭,vue相对而言比较好上手。

    具体来讲:

    相似之处

    • 他们都是JavaScript的UI框架,专注于创造前端的富应用
    • 不同于早期的JavaScript框架“功能齐全”,Reat与Vue只有框架的骨架,其他的功能如路由、状态管理等是框架分离的组件。
    • Vue.js(2.0版本)与React的其中最大一个相似之处,就是他们都使用了一种叫’Virtual DOM’的东西
    • 都鼓励组件化
    • 看到React和Vue都有’props’的概念,这是properties的简写。props在组件中是一个特殊的属性,允许父组件往子组件传送数据。
    • React和Vue都有自己的构建工具,你可以使用它快速搭建开发环境
    • React和Vue都有很好的Chrome扩展工具去帮助你找出bug。
    • Vue与React最后一个相似但略有不同之处是它们配套框架的处理方法。相同之处在于,两个框架都专注于UI层,其他的功能如路由、状态管理等都交由同伴框架进行处理。

    react

    • 数据流单向
    • React推广了Virtual DOM,并创造了新的语法——JSX,JSX允许开发者在JavaScript中书写HTML
    • React一样由如Facebook这类大公司维护
    • props对于子组件来说是必须的,因为它依赖一个“单一数据源”作为它的“状态”
    • React可以使用Create React App (CRA)
    • 而React的react-router和react-redux则是由社区成员维护,它们都不是官方维护的。
    • React与Vue最大的不同是模板的编写
    • 在React中你需要使用setState()方法去更新状态
    • 多数情况下,框架内置的状态管理是不足以支撑大型应用的,Redux或Vuex等状态管理方案是必须使用的。

    vue

    • 数据双向绑定
    • Vue使用模板系统而不是JSX,使其对现有应用的升级更加容易,这是因为模板用的就是普通的HTML,通过Vue来整合现有的系统是比较容易的,不需要整体重构
    • Vue主要是由一位开发者进行维护的
    • 而在Vue中,props略有不同。它们一样是在组件中被定义,但Vue依赖于模板语法,你可以通过模板的循环函数更高效地展示传入的数据。
    • Vue对应的则是vue-cli
    • Vue的核心团队维护着vue-router和vuex
    • React与Vue最大的不同是模板的编写
    • 在Vue中,state对象并不是必须的,数据由data属性在Vue对象中进行管理。
    • Vue的)解决方案适用于小型应用,但对于对于大型应用而言不太适合。

    具体可参考文章 Vue.js与React的全面对比

     

    参考文章

    AngularJS与Vue的比较

    Vue,react,angular三种框架比较

    vue和react 相似和区别

  • 相关阅读:
    批量新增百万条数据 十百万条数据
    sqlserver 组内排序
    EF ++属性会更新实体
    Entity Framework Core: A second operation started on this context before a previous operation completed
    abp Cannot access a disposed object. A common cause of this error is disposing
    abp xunit Can not register IHostingEnvironment. It should be a non-abstract class. If not, it should be registered before.”
    hangfire enqueued but not processing(hangfire 定时任务入队列但不执行)
    EF 更新实体 The instance of entity type 'BabyEvent' cannot be tracked because another instance
    datatable to entiy list 不支持可空类型和枚举类型
    webapi 设置不显示接口到swaggerUI
  • 原文地址:https://www.cnblogs.com/arxive/p/9183543.html
Copyright © 2011-2022 走看看