首页 > 其他分享 >轻松理解Vue和React的异同

轻松理解Vue和React的异同

时间:2023-09-01 10:11:08浏览次数:38  
标签:Vue 异同 js React html 开发者 css

         

        在前端界,Vue和React最近几年一直是我们开发前端项目的两个主流选项。但作为一个想要学习使用框架最快速开发应用的新人我应该先学习哪个?或者说当我们在开发一个新项目时,到底具体是应该选择用Vue呢?还是应该选择用React?这两个的区别是什么?联系是什么?这篇文章,我尽量用最简单的语言来试图阐述我对这两个框架的理解,也希望可以帮助到其他同学。

 

        好了,废话不说,进入正题。

 

       我理解中的Vue的样子,用一句话概况就是:为了帮助前端开发人员可以更专注于UI逻辑或者说前端的业务逻辑来构建大型应用而沿用网页由html、css、js三层结构思想来设计的一套基于数据绑定的响应式系统。

       我理解中的React的样子,用一个句话概况就是:为了帮助前端开发人员可以更专注于UI逻辑或者说前端的业务逻辑来构建大型应用而把所有一切视为js的思想来设计的一套基于单向数据流来进行组合的一套组合式系统。

 

从上面这两句话,我们可以看出来它们的共同点和不同点如下:

       共同点:都是为了帮助前端开发人员可以更专注于UI逻辑或者说前端的业务逻辑来构建大型应用而生的。

       不同点:

              (1)为了解决共同点,Vue的解决问题的思路是:它认为对于已经有html、css、js基础的广大开发者来说,沿用html、css、js分开书写方式,然后在其上对html添加各种指令、对js添加Vue实例的各种选项来对其进行扩展,使开发者可以像使用HTML标记一样简单的只用一个标记去声明就可以解决相关界面和数据的交互问题,进而可以帮助开发者更平滑的掌握并接受这个框架。

              (2)为了解决共同点,React的解决问题的思路是:它认为html、css、js这些玩意在决定一个网页的表现上谁也离不开谁,那既然谁也离不开谁,js又可以生成它们,那把它们都视作js岂不好了。于是就设计出用js写出一个个包含着html、css、js的混合体组件,然后再用它们互相组合,在组合的时候通过数据的单向流动来保证数据的交互进而构成一个完整的应用。

 

        很明显,Vue的设计,更易于开发者使用以及和之前原有的使用原生js或jquery开发的应用集成;而React这样的设计,在思路上很简单,但对于之前已经熟悉了html、css、js三层结构来构建网页形式的开发者,从认识事物发展演变的角度来说,这样的转变太过突然,不够平滑,对于以前的非React应用集成有点困难。

     

 

标签:Vue,异同,js,React,html,开发者,css
From: https://www.cnblogs.com/september-ff/p/17671045.html

相关文章

  • Vue+Elemnt-UI遍历生成form-item并为其绑定校验规则
    需求:接口获取数据,动态渲染表单(文本框类型,内容,标签,是否必填)参照博主:blog.csdn.net/qq_33769914/article/details/122449601遇到的问题:1.通过对单个item绑定的校验规则不生效(表现为:不弹提示,或填了内容依旧提示)           2.提示出现后通过clearValidate()......
  • .Net 6/NetCore3.1 Vue Element Uniapp前后端分离低代码快速开发框架
    .Net6/NetCoreVueElementUniapp前后端分离低代码快速开发框架这是一个能提高开发效率的开发框架,全自动生成PC与移动端(uniapp)代码;支持移动ios/android/h5/微信小程序。一、框架能做什么1、前后端分离项目2、纯后端项目3、移动端开发uni-app(IOS、Android、H5、微信小程......
  • vue3 甘特图(一):选择与初始化甘特图
    vue3甘特图(一)1.功能使用背景:甘特图是一种项目管理工具,以图形直观的方式显示项目的时间轴和任务计划2.vue3初始化甘特图gantt2.1下载安装 dhtmlx-gantt依赖包npminstalldhtmlx-gantt-save2.2引入插件import{gantt}fr......
  • vue项目切换语言方法
    随便打开一个网页右键-审查元素粘贴入以下代码:varhead=document.getElementsByTagName('head')[0];varscript=document.createElement('script');script.type='text/javascript';script.src='https://res.zvo.cn/translate/inspector_v2.js......
  • node18 vue2启动报错 error:0308010C:digital envelope routines::unsupported
    出现原因貌似是因为是因为node17版本开始发布的OpenSSL3.0,而OpenSSL3.0对允许算法和密钥大小增加了严格的限制,可能会对生态系统造成一些影响。解决方法第一种方法降低node版本降低到17以下即可,如项目不能降低版本看后面的解决方式第二种方法设置NODE_OPTIONS环境变量......
  • vue菜单组件中图标跟随菜单高亮变化颜色
    问题在vue左侧菜单中,使用设计师的svg图标有时候不能跟随菜单高亮而改变颜色未高亮时显示灰色菜单高亮时图标显示白色原因svg中图标的颜色设计师给了固定的颜色,所以不会接收父元素给定的颜色解决给svg图标的颜色属性为currentColor......
  • iview Cascader loadData Vue
    <template><div><Carddis-hover><divclass="page-body"><Formref="queryForm":label-width="90"label-position="left"inline>......
  • 一台云服务器一个域名下,如何运行多个JAVA后端项目和多个VUE前端项目
    拿若依前后端分离版项目举例:修改前端代码ruoyi-ui/vue.config.js//二级目录名称ruoyi-uipublicPath:'/ruoyi-ui/',ruoyi-ui/src/router/index.jsexportdefaultnewRouter({mode:'history',//去掉url中的#base:'/ruoyi-ui/',//二级目录路径scrol......
  • Vue3 响应式工具函数
    isRef()​检查某个值是否为ref。unref()​如果参数是ref,则返回内部值,否则返回参数本身。这是 val=isRef(val)?val.value:val 计算的一个语法糖toRef()​可以将值、refs或getters规范化为refs(3.3+)。也可以基于响应式对象上的一个属性,创建一个对应的ref。这......
  • vue sort 排序
    Vue.js提供了多种实现排序的方式。下面列举了几种常见的排序方法及示例代码。 1、使用JavaScript原生的Array.prototype.sort()方法进行排序。这种方法适用于简单的数组排序需求。//在Vue组件中的方法中使用sort方法进行排序data(){return{myArray:[3,1,2,4......