三大框架,本质都是基于js的web应用(前端做的都是web应用包括移动)框架,他们都是帮助我们解决问题的工具,具体用哪个,要结合具体场景。

这三者中,Angular的适用领域相对窄一些,React可以拓展到服务端,移动端Native部分,而Vue因为比较轻量,还能用于业务场景非常轻的页面中。

在Web应用中,我们需要解决的问题可以归纳为三类:

状态
组织
效率

1. 状态

在一个业务界面中,我们可能会根据某些数据去生成一块界面,然后通过界面上的某些操作,改变一些数据,从而影响界面的另外一些部分。

这里面就存在两种关系,一种是从数据到界面,一种是从界面到数据。能够描述界面当前状况的数据,就可以被称为状态。

如果不对状态作抽象,很可能会导致逻辑的混乱,比如说,一个地方点了,要改多个地方,这种代码直接写,很容易写乱的,所以,不同的框架采用不同的方式进行了处理。

比如说MVVM流的Angular和Vue,还有Avalon,Regular,Knockout,都是走的这一流派,通过类似模板的语法,描述界面状态与数据的绑定关系,然后通过内部转换,把这个结构建立起来,当界面发生变化的时候,按照配置规则去更新相应的数据,然后,再根据配置好的规则去,从数据更新界面状态。

React走的是另外一个流派,就是所谓的函数式,在这个里面,推崇的是单向数据流:给定原始界面(或数据),施加一个变化,就能推导出另外一个状态(界面或者数据的更新)。

在这里需要额外提一下ReactiveJS,它的理念又有所不同,是基于Reactive的。

2. 组织

刚才这些,都可以看作是满足最基本的需求,那就是业务的正确性。在这之后,就有另外的诉求了,首当其冲的就是整个业务代码的组织。

所谓组织,指的是两个方面,一方面是模块关系,另一方面是业务模型。

我们刚才提到组件化,整个应用形成了一个组件树,组件之间可能会需要通讯,它们通讯的内容可能是简单的界面事件,也可能是业务含义较深,能够牵一发而动全身的。界面是怎么来的?是由初始界面加上状态形成的,为了能够反映界面的变化,我们必须使得对业务模型的每一个扰动都收敛到确切的状态,所以,这也就是Redux这类东西的意义所在。

3. 效率

效率也分两种,一种是开发效率,一种是运行效率。

我们前面提到,组件化,这是提升开发效率的一种手段,在组件化这个点上,各路框架的组织方式大同小异,反正最终都是组件树。具体到单个组件的实现上,我个人是倾向于MVVM流的,之前做过对比,MVVM系的代码量会少一些,开发效率稍高一点。

目前综合以上,vue3算是综合评分较靠上的框架,易用,开发效率也还好,易于上手。

最后,所有的框架,甚至语言,程序,都是帮助我们解决现实问题的工具,不同之处在于,每个工具的使用场景不同,根据具体场景进行选用,没有一定的。

angular,vue,react三大框架选型的更多相关文章

  1. Angular Vue React 框架中的 CSS

    框架中的 CSS Angular Vue React 三大框架 Angular Vue 内置样式集成 React 一些业界实践 Angular Angular . js (1.x):没有样式集成能力 ...

  2. 前端三大框架(Angular Vue React)

    前端,HTML(超文本标记语言),CSS(层叠样式表)和JavaScript(脚本语言) HTML,通常说的h5,其实按标准来说,HTML4的后续版本不带编号了,并保证向前的兼容性 CSS的版本3,增 ...

  3. 2015前端各大框架比较(angular,vue,react,ant)

    前端流行框架大比拼 angular vue react ant-design angularjs angular是个MVVM的框架.针对的是MVVM这整个事.angular的最主要的场景就是单页应用, ...

  4. angular vue react web前端三大主流框架的对比

    首先,我们先了解什么是MVX框架模式? MVX框架模式:MVC+MVP+MVVM 1.MVC:Model(模型)+View(视图)+controller(控制器),主要是基于分层的目的,让彼此的职责分 ...

  5. 三大框架知识点比较(Angular, Vue, React)

    点击左键 => 拖拽图片 => 新标签页查看图片 => 放大拖拽查阅

  6. angular,vue,react的父子通信

    父子通信 父传子 vue: 父组件:<child :msg="datamsg" ></child> //子组件的msg属性上加数据,datamsg是数据 子 ...

  7. angular,vue,react的基本语法—样式处理

    基本语法 样式处理: vue: 动态属性: v-bind:class 简写 :class react: 变量:class={selecter} angular: 指令:[ngClass]=" ...

  8. angular,vue,react的基本语法—双向数据绑定、条件渲染、列表渲染、angular小案例

    基本语法: 1.双向数据绑定 vue 指令:v-model="msg" react constructor(){ this.state{ msg:"双向数据绑定" ...

  9. angular,vue,react的基本语法—动态属性、事件绑定、ref,angular组件创建方式

    基本语法: 动态属性: vue: v-bind:attr="msg" :attr="msg" react: attr={msg} angular [attr]= ...

  10. angular,vue,react的基本语法—插值表达式,渲染数据,响应式数据

    基本语法: 1.插值表达式: vue:{{}} react:{} angular:{{}} 2.渲染数据 vue js: export default{ data(){ return{ msg:&qu ...

随机推荐

  1. [Spring+SpringMVC+Mybatis]框架学习笔记(八):Mybatis概述

    第8章 Mybatis概述 8.1 几个概念 ORM Object-Relationship Mapping 对象关系映射,它是一种思想,它的实质是将数据库中的数据用对象的形式表现出来. JPA Ja ...

  2. Matlab2021a打包jar包问题(linux、windows)

    都有chatgpt了,实在不想写博客....不过还是记录一下问题吧. 我们在用matlab打包jar包的时候,经常会出现打包出错的问题,但无非注意以下几点就行了: 1.打包方式 这个还是很简单的,而且 ...

  3. RAT蓝队自动化测试框架

    RAT蓝队自动化测试框架 介绍 RAT 是根据 MITRE ATT&CK 战术矩阵测试蓝队检测能力的脚本框架,由 python2.7 编写,共有 50 多种不同 ATT&CK 技术点和 ...

  4. Axios向后段请求数据GET POST两种方法的不同之处

    GET请求 向后端请求时,通过URL向后端传递参数 axios({ url:'http://127.0.0.1:9000/get-user-list/', type:'json', //GET方法携带 ...

  5. 文心一言 VS 讯飞星火 VS chatgpt (69)-- 算法导论6.5 8题

    八.HEAP-DELETE(A,i)操作能够将结点 i 从堆 A 中删除.对于一个包含 n个元素的堆,请设计一个能够在 O(lgn)时间内完成的 HEAP-DELETE 操作. 文心一言: 要在 O( ...

  6. 如何在 Windows10 下运行 Tensorflow 的目标检测?

    前言 看过很多博主通过 Object Detection 实现了一些皮卡丘捕捉,二维码检测等诸多特定项的目标检测.而我跟着他们的案例来运行的时候,不是 Tensorflow 版本冲突,就是缺少什么包, ...

  7. 【教程】青少年CTF机器人使用教程

    前言 本期教程适用于版本号为2.0.1-Beta的青少年CTF机器人,其他版本可能与当前版本不同. 由于之前版本的机器人重构,所以我们细化了本次的机器人逻辑,并且对机器人的功能进行了一些升级. 机器人 ...

  8. 缓存面试解析:穿透、击穿、雪崩,一致性、分布式锁、Redis过期,海量数据查找

    为什么使用缓存 在程序内部使用缓存,比如使用map等数据结构作为内部缓存,可以快速获取对象.通过将经常使用的数据存储在缓存中,可以减少对数据库的频繁访问,从而提高系统的响应速度和性能.缓存可以将数据保 ...

  9. 形象谈JVM-第三章-即时编译器优化技术

    即时编译器优化技术一览: 相信许多同学看完这个表格,脑子里面嗡嗡的,这些名字也是晦涩难懂,要实现这些优化的技术确实有比较大的难度,但是咱们只是学习,去理解这些技术,其实并不难,下面咱们直接开讲. 首先 ...

  10. 《SQL与数据库基础》13. 视图

    目录 视图 简介 语法 检查选项 视图更新 视图作用 本文以 MySQL 为例 视图 简介 视图(View)是一种虚拟存在的表.视图中的数据并不在数据库中实际存在,行和列数据来自定义视图的查询中使用的 ...