• Angular, Vue, React三大框架学习后的自我认知总结


    因为项目需要,先入手的框架就是Angular1.x加上UI Angular Material再加Ts,国内的资料少的可怜, 也没人可问,无助感满满。那个时候的我还在读大二,那个时候JS学的似懂非懂,那个时候唯一用的顺手的就是Bootstrap。现在回想那段时间,就是痛苦加痛苦。官网的案例敲了一个遍,不理解也记不住,到后来有种感觉我只是写多了无形中把代码片段都背下来了,并不是我学会了。再后来大四来了广州实习,又是因为工作需要,开始学习Vue, 果然痛苦系数下降了几个等级,很快就熟练的上手了。毕业一年后也就是去年又开始捣鼓React, 有种自来熟的亲切感,不像当年的自己对Angular的恐惧,也是直接就开始上手写。生活总是有趣的,所有的路都不会白走,他会用另外一种形式回报你, hiahia...

    so, 是时候要简单记录一次了(等以后把原理摸清了再来更正一波)

    List1: 简单记录一波各自的背景

    • Angular:  Angular是Google 2009年发布的第一个MVVM框架,  随后2016年9月宣布了Angular2.0的版本(2相比1区别较大,官网把1.x的版本称为AngularJS, 2.x的版本称为Angular)
    • React: React是2013年FaceBook推出了开源的JavaScript库
    • Vue:  Vue是2015年尤雨溪大大推出的渐进的JavaScript框架

    List2: 简单描述一波各自的特点

    Angular大哥

    • 数据绑定: AngularJS遵循双向数据绑定。它是模型和视图组件之间数据的自动同步。
    • 模型-视图-控制器(MVC)框架: MVC是一种用于开发web应用程序的软件设计模式。AngularJS的工作模型是基于MVC模式的。AngularJS中的MVC架构简单、通用、动态,MVC使构建单独的客户端应用程序变得更加容易。
    • 服务: AngularJS有几个内置的服务,比如$http,用于生成XMLHttpRequest。
    • 依赖注入: AngularJS有一个内置的依赖注入子系统,可以帮助开发人员轻松地创建、理解和测试应用程序。
    • 路由: 路由是从一个视图到另一个视图的转换。路由是单页应用程序的关键方面,所有内容都在单页中。

    React二哥

    • JSX: JSX是一个JavaScript语法扩展,它扩展了ES6,使类似HTML的文本可以与JavaScript React代码共存
    • 组件: ReactJS应用程序由多个组件组成,每个组件都有自己的逻辑和控件。这些组件可以重用
    • 单向数据绑定: ReactJS遵循单向数据流或单向数据绑定,能够更好地控制整个应用程序
    • 虚拟DOM: 虚拟DOM对象是真实DOM对象的表示。当web应用程序中发生任何修改时,整个UI都将在虚拟DOM表示中重新呈现。然后,它检查以前的DOM表示和新DOM之间的差异。完成之后,真正的DOM将只更新更改的内容。它使应用程序更快,并且没有内存浪费。

    Vue三哥

    • 简洁: 分别用angular和vue实现双向绑定的代码, 稍稍对比就能感受到Vue的简洁
    • 轻量: Vue的生产版本大小为33.30KB (min+gzip), 相比Angular为144kb,可见有多重
    • 数据驱动: 让开发者省去了操作DOM的环节, 只需要改变数据。数据更新时通知指令去修改DOM, 数据驱动DOM变化
    • 组件化: 一个个页面可根据需求拆分成多个组件进行编写,管理方便, 也可重用

    List3: 简单描述这三个框架

    共同的理念:

    • 单页应用程序
    • 组件管理
    • 数据怎么流通,怎么绑定,数据状态怎么维护
    • 和后端API怎么交互
    • 生命周期
    • 内置指令&自定义指令(Angular & Vue)
    • 使用 Virtual DOM(React & Vue)

    不同的点:

    Angular: 它的设计不是单纯解决界面的显示问题,它是面向整体应用开发的解决方案。入门难度系数相对高,体型大, 功能全,做的事多, 观察package文件的dependencies就可以看出,不像Vue和React需要引入很多的第三方

    Vue: 它设计初衷是帮助开发者更好的开发界面模块,一个模块是应用程序中独立的一个部分。入门难度系数低,体型小, vue提供的东西相对比React要多,不需要安太多的第三方插件

    React:  它设计的初衷就是为前端提供可复用、高性能的UI组件。拥有庞大的生态系统,入门难度系数低,体型小

    资料参考:

    1) https://www.zhihu.com/question/67839941 (Angular和AngularJS之间的关系)

    2) http://www.cainiaoxueyuan.com/gcs/5929.html(VueJS教程:vue.js是什么?有哪些优点或特点)

    3) https://zhuanlan.zhihu.com/p/73227275 (Angular, React, Vue三大前端框架大比拼)

  • 相关阅读:
    石头剪刀布技巧+个人经验总结
    能让你聪明的工作DEAL四法则,来自《每周工作四小时》书籍
    开发软件名称简写定义表
    罗永浩简历(自荐新东方的简历)
    感人微电影 《健康树》金赫及作品简介
    陈寅恪
    中国朝代顺序表
    Loading...加载图收集
    KeyBoardUtils.java——android键盘工具类
    LogUtils.java
  • 原文地址:https://www.cnblogs.com/Tiboo/p/12383720.html
Copyright © 2020-2023  润新知