精华内容
下载资源
问答
  • react和vue的未来趋势
    万次阅读
    2017-09-08 16:29:02

     

    关于react和vue的对比已经很久了,本人一直是react的重度使用者,为了对比vue和react的使用感受,特意了解相关知识,并且搭建了一些简单的demo以做对比,最终整理成文。

    至于angular和vue还有react的对比,这里暂时不细聊。最近 小尤和大漠 之间的骂战也终以大漠离职,删除所有文章而告终。其实我想说,技术这东西,有专利,但是彼此都是在相互学习。有借鉴的地方说明你写的好,确实有价值!只要不磨灭的掉别人的价值和付出,全部据为己有,那其实都是可以接受的。开源的环境,本身就是鼓励大家贡献出自己的价值,与大家一起成长。好,言归正传!

     

    首先,说说两个框架的技术栈的基本构成

     

    react:react-redux(mobx)-webpack

    vue:vue-vuex-webpack

     

    然后,简单说说两个框架的异同吧

    一、相同的部分

    1.数据驱动视图,提供响应式的视图组件

    2.都有virtual DOM, 组件化开发,通过props参数进行父子组件数据的传递,都实现webComponents规范

    3.都支持服务端渲染

    4.都有native解决方案,reactnative(facebook团队) vs weex(阿里团队)

     

    二、不同的部分

    1.社区:react相比来讲还是要大于vue,毕竟背后支撑团队不 同。facebook vs 个人!当然目前vue的增长速度是高于react的增速,不知道未来的发展趋势是如何。

    2.开发模式:React本身,是严格的view层,MVC模式;Vue则是MVVM模式的一种方式实现

    3.数据绑定:Vue借鉴了angular,采取双向数据绑定的方式;React,则采取单向数据流的方式

    4.数据渲染:对于大规模数据渲染,React要高于Vue一些;但是对于小轻量的,Vue确实更高效

    5.数据更新:

    Vue采取依赖追踪,默认是优化状态:按需更新;

    React在则有两种选择:

    1)手动添加shouldComponentUpdate,来避免冗余的vdom,re-render的情况

    2)Components 尽可能都用 pureRenderMixin,然后采用 redux 结构 + Immutable.js(感受一波)

    三、如何选择使用场景

    1)期待模板搭建应用——选择 Vue

     

    Vue应用的默认选项是把markup放在HTML文件中。数据绑定表达式采用的是和Angular相似的mustache语法,而指令(特殊的HTML属性)用来向模板添加功能。

     

    相比之下,React应用不使用模板,它要求开发者借助JSX在JavaScript中创建DOM。

     

    对于来自标准Web开发方式的新开发者,模板更容易理解。但是一些资深开发者也喜欢模板,因为模板可以更好的把布局和功能分割开来,还可以使用Pug之类的模板引擎。

     

    但是使用模板的代价是不得不学习所有的HTML扩展语法,而渲染函数只需要会标准的HTML和JavaScript。而且比起模板,渲染函数更加容易调试和测试。当然你不应该因为这方面的原因错过Vue,因为在Vue2.0中提供了使用模板或者渲染函数的选项。

     

    2)期待简单和“能用就行”的东西——选择 Vue

     

    一个简单的Vue项目可以不需要转译直接运行在浏览器中,所以使用Vue可以像使用jQuery一样简单。当然这对于React来说在技术上也是可行的,但是典型的React代码是重度依赖于JSX和诸如class之类的ES6特性的。

     

    Vue的简单在程序设计的时候体现更深,让我们来比较一下两个框架是怎样处理应用数据的(也就是state)。

     

    React中是通过比较当前state和前一个state来决定何时在DOM中进行重渲染以及渲染的内容,因此需要不可变(immutable)的state。

     

    Vue中的数据是可变(mutated)的,所以同样的操作看起来更加简洁。

     

    让我们来看看Vue中是如何进行状态管理的。当向state添加一个新对象的时候,Vue将遍历其中的所有属性并且转换为getter,setter方法,现在Vue的响应系统开始保持对state的跟踪了,当state中的内容发生变化的时候就会自动重新渲染DOM。令人称道的是,Vue中改变state的状态的操作不仅更加简洁,而且它的重新渲染系统也比React 的更快更有效率。

     

    Vue的响应系统还有有些坑的,例如:它不能检测属性的添加和删除和某些数组更改。这时候就要用到Vue API中的类似于React的set方法来解决。

     

    3)期待应用尽可能的小和快——选择Vue

     

    当应用程序的状态改变时,React和Vue都将构建一个虚拟DOM并同步到真实DOM中。 两者都有各自的方法优化这个过程。

     

    Vue核心开发者提供了一个benchmark测试,可以看出Vue的渲染系统比React的更快。测试方法是10000个项目的列表渲染100次,结果如下图。从实用的观点来看,这种benchmark只和边缘情况有关,大部分应用程序中不会经常进行这种操作,所以这不应该被视为一个重要的比较点。但是,页面大小是与所有项目有关的,这方面Vue再次领先,它目前的版本压缩后只有25.6KB。React要实现同样的功能,你需要React DOM(37.4KB)和React with Addon库(11.4KB),共计44.8KB,几乎是Vue的两倍大。双倍的体积并不能带来双倍的功能。

     

    4)期待构建一个大型应用程序——选择React

     

    像文章开头那种同时用Vue和React实现的简单应用程序,可能会让一个开发者潜意识中更加倾向于Vue。这是因为基于模板的应用程序第一眼看上去更加好理解,而且能很快跑起来。但是这些好处引入的技术债会阻碍应用扩展到更大的规模。模板容易出现很难注意到的运行时错误,同时也很难去测试,重构和分解。

     

    相比之下,Javascript模板可以组织成具有很好的分解性和干(DRY)代码的组件,干代码的可重用性和可测试性更好。Vue也有组件系统和渲染函数,但是React的渲染系统可配置性更强,还有诸如浅(shallow)渲染的特性,和React的测试工具结合起来使用,使代码的可测试性和可维护性更好。

     

    与此同时,React的immutable应用状态可能写起来不够简洁,但它在大型应用中意义非凡,因为透明度和可测试性在大型项目中变得至关重要。

     

    5)期待同时适用于Web端和原生APP的框架——选择React

     

    React Native是一个使用Javascript构建移动端原生应用程序(iOS,Android)的库。 它与React.js相同,只是不使用Web组件,而是使用原生组件。 如果你学过React.js,很快就能上手React Native,反之亦然。

     

    它的意义在于,开发者只需要一套知识和工具就能开发Web应用和移动端原生应用。如果你想同时做Web端开发和移动端开发,React为你准备了一份大礼。

     

    阿里的Weex也是一个跨平台UI项目,目前它以Vue为灵感,使用了许多相同的语法,同时计划在未来完全集成Vue,然而集成的时间和细节还不清楚。因为Vue将HTML模板作为它设计的核心部分,并且现有特性不支持自定义渲染,因此很难看出目前的Vue.js的跨平台能力能像React和React Native一样强大。

     

    6)期待最大的生态系统——选择React

     

    毫无疑问,React是目前最受欢迎的前端框架。它在NPM上每个月的下载量超过了250万次,相比之下,Vue是22.5万次。人气不仅仅是一个肤浅的数字,这意味着更多的文章,教程和更多Stack Overflow的解答,还意味有着更多的工具和插件可以在项目中使用,让开发者不再孤立无援。

     

    这两个框架都是开源的,但是React诞生于Facebook,有Facebook背书,它的开发者和Facebook都承诺会持续维护React。相比之下,Vue是独立开发者尤雨溪的作品。尤雨溪目前在全职维护Vue,也有一些公司资助Vue,但是规模和Facebook和Google没得比。不过请对Vue的团队放心,它的小规模和独立性并没有成为劣势,Vue有着固定的发布周期,甚至更令人称道的是,Github上Vue只有54个open issue,3456个closed issue,作为对比,React有多达530个open issue,3447个closed issue。

     

    补充说明:用最适合自己的,如果已经精通一个,完全没有特别的必要,必须要用另一个,当然学习借鉴是很可以的。

     

    总结:Vue着重提高开发效率,让前端程序员更快速方便的开发应用。React着重于变革开发思想,提升前端程序员编程的深度与创造力,让前端工程师成为真正的程序员而不是UI的构建者

    a) Vue的优势是:

     

    模板和渲染函数的弹性选择

     

    简单的语法和项目配置

     

    更快的渲染速度和更小的体积

     

    b) React的优势是:

     

    更适合大型应用和更好的可测试性

     

    Web端和移动端原生APP通吃

     

    更大的生态系统,更多的支持和好用的工具

    c) React和Vue都是很优秀的框架,它们之间的相似之处多过不同之处,并且大部分的优秀功能是相通的:

     

    用虚拟DOM实现快速渲染

     

    轻量级

     

    响应式组件

     

    服务端渲染

     

    集成路由工具,打包工具,状态管理工具的难度低

     

    优秀的支持和社区

     

    最后在概括一下大致的使用场景,参考

     

    小、中型应用:vue-webpack更实用

    中、大型应用:react-redux-webpack更实用

    非应用型网站:看大家自己的喜欢什么就用什么咯

    参考:https://medium.com/js-dojo/react-or-vue-which-javascript-ui-library-should-you-be-using-543a383608d#.bsnrb9sap

    译文:http://www.jcodecraeer.com/a/javascript/2017/0111/6983.html 

     

    其他比较好的推荐文章

    http://www.jianshu.com/p/8b94f1b98578
    https://cn.vuejs.org/v2/guide/comparison.html

    更多相关内容
  • Vue和React的区别

    万次阅读 多人点赞 2021-04-07 11:45:15
    首先找到 Vue React 的共性,它们被用于解决什么问题, 然后再挖掘各自独特的个性、设计原理以及未来趋势等。 vue和react区别 共同点 Vue和React存在着很多的共同点: 数据驱动视图 组件化 ...

    在我之前写的 localStorage与Vuex的区别 这篇文章中讲过关于这个类型的题目,其中分析过描述区别,就是求同存异的过程。那接下来我用同样的思路来解这道题目。

    首先找到 Vue 和 React 的共性,它们被用于解决什么问题, 然后再挖掘各自独特的个性、设计原理以及未来的趋势等。

    图片

    vue和react区别

    共同点

    Vue和React存在着很多的共同点:

    • 数据驱动视图

    • 组件化

    • 都使用 Virtual DOM

    1. 数据驱动视图

    在jquery时代,我们需要频繁的操作DOM来实现页面效果与交互;而Vue和React 解决了这一痛点,采用数据驱动视图方式,隐藏操作DOM的频繁操作。所以我们在开发时,只需要关注数据变化即可,但是二者实现方式不尽相同。

    2. 组件化

    React与Vue都遵循组件化思想,它们把注意力放在UI层,将页面分成一些细块,这些块就是组件,组件之间的组合嵌套就形成最后的网页界面。

    所以在开发时都有相同的套路,比如都有父子组件传递, 都有数据状态管理、前端路由、插槽等。

    3. Virtual DOM

    Vue与React都使用了 Virtual DOM + Diff算法, 不管是Vue的Template模板+options api写法, 还是React的Class或者Function写法,最后都是生成render函数,而render函数执行返回VNode(虚拟DOM的数据结构,本质上是棵树)。

    当每一次UI更新时,总会根据render重新生成最新的VNode,然后跟以前缓存起来老的VNode进行比对,再使用Diff算法(框架核心)去真正更新真实DOM(虚拟DOM是JS对象结构,同样在JS引擎中,而真实DOM在浏览器渲染引擎中,所以操作虚拟DOM比操作真实DOM开销要小的多)

    Vue和React通用流程:

    图片

    图片.png

    不同点

    Vue和React两者虽然都是用于构建用户界面的框架,但是也有很大的差异,首先二者核心的思想就不同。

    1. 核心思想不同

    Vue早期开发就尤雨溪大佬,所以定位就是尽可能的降低前端开发的门槛,让更多的人能够更快地上手开发。这就有了vue的主要特点:灵活易用的渐进式框架,进行数据拦截/代理,它对侦测数据的变化更敏感、更精确

    React 从一开始的定位就是提出 UI 开发的新思路。背靠大公司Facebook 的React,从开始起就不缺关注和用户,而且React想要做的是用更好的方式去颠覆前端开发方式。所以React推崇函数式编程(纯组件),数据不可变以及单向数据流,当然需要双向的地方也可以手动实现, 比如借助onChangesetState来实现。

    由于两者核心思想的不同,所以导致Vue和React在后续设计产生了许多的差异。

    2. 组件写法差异

    React推荐的做法是JSX + inline style, 也就是把 HTML 和 CSS 全都写进 JavaScript 中,即 all in js; Vue 推荐的做法是 template 的单文件组件格式(简单易懂,从传统前端转过来易于理解),即 html,css,JS 写在同一个文件(vue也支持JSX写法)

    这个差异一定程度上也是由于二者核心思想不同而导致的。

    3. diff算法不同

    传统Diff算法是循环递归每一个节点:

    图片

    传统diff

    如上图所示,从左侧a节点依次进行对比:a->da->ea->ba->aa->c, 剩下的其他节点也是与右侧树每个节点进行对比。

    将两颗树中所有的节点一一对比需要O(n²)的复杂度,在对比过程中发现旧节点在新的树中未找到,那么就需要把旧节点删除,删除一棵树的一个节点(找到一个合适的节点放到被删除的位置)的时间复杂度为O(n),同理添加新节点的复杂度也是O(n),合起来diff两个树的复杂度就是O(n³)

    传统Diff算法复杂度太高, vue2.x加入了 Virtual Dom和react拥有相同的diff优化原则(将算法复杂度降为O(n))。

    两者流程思路上是类似的:

    • 不同的组件产生不同的 DOM 结构。当type不相同时,对应DOM操作就是直接销毁老的DOM,创建新的DOM。

    • 同一层次的一组子节点,可以通过唯一的 key 区分。

    网络上看到一张图挺形象的图:图片

    但是在源码实现上又完全不同:

    React的Diff算法核心实现

    图片

    图片.png

    1. react首先对新集合进行遍历,for( name in nextChildren)

    2. 通过唯一key来判断老集合中是否存在相同的节点。如果没有的话创建

    3. 如果有的话,if (preChild === nextChild )

      • 会将节点在新集合中的位置和在老集合中lastIndex进行比较

      • 如果if (child._mountIndex < lastIndex) 进行移动操作,否则不进行移动操作。

    4. 如果遍历的过程中,发现在新集合中没有,但在老集合中有的节点,会进行删除操作

    Vue的Diff算法核心实现

    updateChildren是vue diff的核心, 过程可以概括为:

    • 旧children新children各有两个头尾的变量StartIdxEndIdx,它们的2个变量相互比较,一共有4种比较方式。

    • 如果4种比较都没匹配,如果设置了key,就会用key进行比较,在比较的过程中,变量会往中间靠,一旦StartIdx>EndIdx表明旧children新children至少有一个已经遍历完了,就会结束比较。

    可以用下图来描述在一次比较过程中四个步骤:

    图片

    图片.png

    Vue2的核心Diff算法采用了双端比较的算法,同时从新旧children的两端开始进行比较,借助key值找到可复用的节点,再进行相关操作。相比React的Diff算法,同样情况下可以减少移动节点次数,减少不必要的性能损耗,更加的优雅。

    4. 响应式原理不同

    Vue

    • Vue依赖收集,自动优化,数据可变。

    • Vue递归监听data的所有属性,直接修改。

    • 当数据改变时,自动找到引用组件重新渲染。

    React

    React基于状态机,手动优化,数据不可变,需要setState驱动新的state替换老的state。当数据改变时,以组件为根目录,默认全部重新渲染, 所以 React 中会需要 shouldComponentUpdate 这个生命周期函数方法来进行控制

    5. 其他不同点

    除了上面的四个点外,细数还有很多不同点的, 比如api的差异也挺大的,Vue为了更加简单易用,引入了指令、filter等概念以及大量的option API,比如 watchcomputed等都是非常好用的。

    而React的API比较少, 如果你的JavaScript基础比较好,上手也是比较容易的

    当然如果你看过二者的源码,也可以说说二者源码的不同点。这里抛出它们的源码编译过程图,方便你更好的阅读源码。

    Vue源码编译过程图:图片

    React源码编译过程图:

    图片

    React源码编译过程图

    以上就是关于Vue和React的区别讲解, 当面试官问到这个问题时,重点在于分析思路, 抓住要点去扩展。最后我们还可以谈谈未来发展趋势,其实随着Vue3的更新,和React在使用上相似度越来越高, 其实对于开发者来说挺好的, 上手一个框架后再学另一个,学习成本就会有所降低。

    展开全文
  • 首先找到 Vue React 的共性,它们被用于解决什么问题, 然后再挖掘各自独特的个性、设计原理以及未来趋势等。 vue和react区别 共同点 Vue和React存在着很多的共同点: 数据驱动视图 组件化 都使用 ...

    在我之前写的localStorage与Vuex的区别 这篇文章中讲过关于这个类型的题目,其中分析过描述区别,就是求同存异的过程。那接下来我用同样的思路来解这道题目。

    首先找到 Vue 和 React 的共性,它们被用于解决什么问题, 然后再挖掘各自独特的个性、设计原理以及未来的趋势等。

    vue和react区别

    共同点

    Vue和React存在着很多的共同点:

    • 数据驱动视图

    • 组件化

    • 都使用 Virtual DOM

    1. 数据驱动视图

    在jquery时代,我们需要频繁的操作DOM来实现页面效果与交互;而Vue和React 解决了这一痛点,采用数据驱动视图方式,隐藏操作DOM的频繁操作。所以我们在开发时,只需要关注数据变化即可,但是二者实现方式不尽相同。

    2. 组件化

    React与Vue都遵循组件化思想,它们把注意力放在UI层,将页面分成一些细块,这些块就是组件,组件之间的组合嵌套就形成最后的网页界面。

    所以在开发时都有相同的套路,比如都有父子组件传递, 都有数据状态管理、前端路由、插槽等。

    3. Virtual DOM

    Vue与React都使用了 Virtual DOM + Diff算法, 不管是Vue的Template模板+options api 写法, 还是React的Class或者Function写法,最后都是生成render函数,而render函数执行返回VNode(虚拟DOM的数据结构,本质上是棵树)。

    当每一次UI更新时,总会根据render重新生成最新的VNode,然后跟以前缓存起来老的VNode进行比对,再使用Diff算法(框架核心)去真正更新真实DOM(虚拟DOM是JS对象结构,同样在JS引擎中,而真实DOM在浏览器渲染引擎中,所以操作虚拟DOM比操作真实DOM开销要小的多)

    Vue和React通用流程:

    图片.png

    不同点

    Vue和React两者虽然都是用于构建用户界面的框架,但是也有很大的差异,首先二者核心的思想就不同。

    1. 核心思想不同

    Vue早期开发就尤雨溪大佬,所以定位就是尽可能的降低前端开发的门槛,让更多的人能够更快地上手开发。这就有了vue的主要特点:灵活易用的渐进式框架,进行数据拦截/代理,它对侦测数据的变化更敏感、更精确

    React 从一开始的定位就是提出 UI 开发的新思路。背靠大公司Facebook 的React,从开始起就不缺关注和用户,而且React想要做的是用更好的方式去颠覆前端开发方式。所以React推崇函数式编程(纯组件),数据不可变以及单向数据流,当然需要双向的地方也可以手动实现, 比如借助onChangesetState来实现。

    由于两者核心思想的不同,所以导致Vue和React在后续设计产生了许多的差异。

    2. 组件写法差异

    React推荐的做法是JSX + inline style, 也就是把 HTML 和 CSS 全都写进 JavaScript 中,即 all in js; Vue 推荐的做法是 template 的单文件组件格式(简单易懂,从传统前端转过来易于理解),即 html,css,JS 写在同一个文件(vue也支持JSX写法)

    这个差异一定程度上也是由于二者核心思想不同而导致的。

    3. diff算法不同

    传统Diff算法是循环递归每一个节点:

    传统diff

    如上图所示,从左侧a节点依次进行对比:a->da->ea->ba->aa->c, 剩下的其他节点也是与右侧树每个节点进行对比。

    将两颗树中所有的节点一一对比需要O(n2)的复杂度,在对比过程中发现旧节点在新的树中未找到,那么就需要把旧节点删除,删除一棵树的一个节点(找到一个合适的节点放到被删除的位置)的时间复杂度为O(n),同理添加新节点的复杂度也是O(n),合起来diff两个树的复杂度就是O(n3)

    传统Diff算法复杂度太高, vue2.x加入了 Virtual Dom和react拥有相同的diff优化原则(将算法复杂度降为O(n))。

    两者流程思路上是类似的:

    • 不同的组件产生不同的 DOM 结构。当type不相同时,对应DOM操作就是直接销毁老的DOM,创建新的DOM。

    • 同一层次的一组子节点,可以通过唯一的 key 区分。

    网络上看到一张图挺形象的图:

    但是在源码实现上又完全不同:

    React的Diff算法核心实现

    图片.png

    1. react首先对新集合进行遍历,for( name in nextChildren)

    2. 通过唯一key来判断老集合中是否存在相同的节点。如果没有的话创建

    3. 如果有的话,if (preChild === nextChild )

    • 会将节点在新集合中的位置和在老集合中lastIndex进行比较

    • 如果if (child._mountIndex < lastIndex) 进行移动操作,否则不进行移动操作。

    • 如果遍历的过程中,发现在新集合中没有,但在老集合中有的节点,会进行删除操作

    Vue的Diff算法核心实现

    updateChildren是vue diff的核心, 过程可以概括为:

    • 旧children新children各有两个头尾的变量StartIdxEndIdx,它们的2个变量相互比较,一共有4种比较方式。

    • 如果4种比较都没匹配,如果设置了key,就会用key进行比较,在比较的过程中,变量会往中间靠,一旦StartIdx>EndIdx表明旧children新children至少有一个已经遍历完了,就会结束比较。

    可以用下图来描述在一次比较过程中四个步骤:

    图片.png

    Vue2的核心Diff算法采用了双端比较的算法,同时从新旧children的两端开始进行比较,借助key值找到可复用的节点,再进行相关操作。相比React的Diff算法,同样情况下可以减少移动节点次数,减少不必要的性能损耗,更加的优雅。

    4. 响应式原理不同

    Vue

    • Vue依赖收集,自动优化,数据可变。

    • Vue递归监听data的所有属性,直接修改。

    • 当数据改变时,自动找到引用组件重新渲染。

    React

    React基于状态机,手动优化,数据不可变,需要setState驱动新的state替换老的state。当数据改变时,以组件为根目录,默认全部重新渲染, 所以 React 中会需要 shouldComponentUpdate 这个生命周期函数方法来进行控制

    5. 其他不同点

    除了上面的四个点外,细数还有很多不同点的, 比如api的差异也挺大的,Vue为了更加简单易用,引入了指令、filter等概念以及大量的option API,比如 watchcomputed等都是非常好用的。

    而React的API比较少, 如果你的JavaScript基础比较好,上手也是比较容易的

    当然如果你看过二者的源码,也可以说说二者源码的不同点。这里抛出它们的源码编译过程图,方便你更好的阅读源码。

    Vue源码编译过程图:

    React源码编译过程图:

    React源码编译过程图

    以上就是关于Vue和React的区别讲解, 当面试官问到这个问题时,重点在于分析思路, 抓住要点去扩展。最后我们还可以谈谈未来发展趋势,其实随着Vue3的更新,和React在使用上相似度越来越高, 其实对于开发者来说挺好的, 上手一个框架后再学另一个,学习成本就会有所降低。

    面试题:你了解浏览器的事件循环吗?

    面试题:实际开发中都做过哪些性能优化?

    上面这两道题你更想知道哪一个的分析呢?或者你有更好的面试题?欢迎留言,可能下一个问题就是想了解的

    爱心三连击

    1.看到这里了就点个在看支持下吧,你的「点赞,在看」是我创作的动力。
    2.关注公众号【程序员成长指北】,回复「1」加入高级前端交流群!「在这里有好多 前端开发者,会讨论前端 Node 知识,互相学习」!
    3.也可添加微信【ikoala520】,一起成长。

    展开全文
  • 随着社交媒体用户生成内容的爆炸式增长,互联网正在向更好的方向发展。为了跟上时代发展的步伐,提供更好的交互性,开发人员开始构建库框架来简化交互式站点的构建。2006 年,John Resig 发布了 jQuery,使得在 ...

    随着社交媒体和用户生成内容的爆炸式增长,互联网正在向更好的方向发展。为了跟上时代发展的步伐,提供更好的交互性,开发人员开始构建库和框架来简化交互式站点的构建。2006 年,John Resig 发布了 jQuery,使得在 HTML 中编写客户端脚本变得更加容易。随着时间的推移,其他类似的项目出现了。刚开始,它们是一个庞大的单体,而且把项目的构想强加给开发者。现在,这些库已经开始向紧凑型轻量级库转变,可以非常容易地添加到任何应用程序中。让我们来看看其中最受欢迎的三个。
    在这里插入图片描述
    JavaScript 框架概览

    开始一个新项目总是要做许多决定。其中一个关键决策就是选择合适的框架或库。幸运的是,Vue.js 是一个功能非常多样化的库,可以处理各种各样的任务。

    Vue.js

    Vue.js 这个库让你可以将交互性和附加功能添加到任何使用 JavaScript 的编码环境中。Vue 既可以在单独的页面上用来解决简单的任务,也可以作为成熟的工业应用程序的基础。Vue.js 是一个用于构建图形用户界面的高级框架。它也可以与一些现代工具和附加库一起,用于构建复杂的单向应用程序。

    Vue 库其中一个最大的优点是它不需要任何特殊知识。任何 Vue 应用程序都是使用 HTML、CSS 和 JavaScript 编写的——熟悉这些工具就可以立即投入工作。即使你以前从未做过客户端开发,也可以基于以前的 MVC 设计模式使用经验进行构建,这种模式与 MVVM 非常相似。

    React

    借助 React 库,我们可以轻松地创建交互式用户界面。集成 React 时,不需要更改当前项目的代码,它只负责渲染界面,不会额外带来痛苦。

    React 系统支持用户界面更新,使得为应用程序创建健壮的模块化组件更加容易。React 库通过数据更新来实现大部分用户界面维护工作,这对开发人员来说非常令人愉快(难怪它如此受欢迎)。

    Angular

    Angular 差不多是一个完整的开发环境。它包含一整套程序,包括 TypeScript 编译器、AOT 编译器和 Web 服务器。Angular 的 Web 服务器用于调试使用这个框架开发的站点。它是用同一个 Angular CLI 实用程序启动的,要启动 Angular CLI,你需要在 Windows 命令行中进入项目文件夹,并执行ng serve命令。

    Vue、React 和 Angular 的主要特征

    React 最大的其中一个优势是:在稳定性和创新性之间做了很好的平衡,使得用户比较容易适应。这个原因以及其他一些原因使 React 保持了它的地位,并获得越来越多的人气。

    在这里插入图片描述
    大小

    开发框架的大小对未来应用的性能至关重要。框架和应用程序必须在应用程序开始正常工作之前加载。

    在这方面,Angular 最复杂,有 143KB。React 次之,有 43KB,而 Vue.js 只有 23KB。除非你的应用特别大,并且包含了大量的组件,否则最好使用更小的结构。

    性能

    在 Web 项目中,性能与 DOM 密切相关:DOM 在浏览器 / 代码中表示 Web 页面。在发生更新时,你可以通过 DOM 控制 Web 页面。

    Vue、React 和 Angular 的性能会因为任务的不同而有所差异,但在大多数情况下,它们都非常高效和快速。React 和 Vue 都实现了 DOM。得益于其精心设计的结构,Vue 提供了出色的性能和内存分配。这就是 React 和 Vue.js 优于 Angular 的地方:它们利用了虚拟 DOM——原始 DOM 的复本。

    注意:DOM 是一种将 HTML 文档的内容表示为对象的方法。此外,还有一个用于管理指定对象的接口。DOM 分常规 DOM(也称为真 DOM)和虚拟 DOM。它们有什么区别呢?让我们来看一个例子。如果你想修改在 HTML 标签中找到的某些信息,算法将会这样做:真正的 DOM 将更新所有标签,直到它找到它需要的片段。在某些情况下,这会对性能和其他参数产生负面影响。虚拟 DOM 则只更新必要的 HTML 块。

    社区    
    

    React 是世界上最流行的框架,这已不是什么秘密。它越来越受欢迎,因为它提供了真正的 Promise。React 的 Mental Model 看起来很可靠,其组件让创建用户界面变得更容易,API 灵活且富有表现力,整个项目给人的感觉是就应该那样。对 API 库的描述也友好,更容易给人留下良好的印象。

    从那时起,React 库在基本概念和 API 方面就基本保持不变,但已经形成并发展出了一整套的知识和最佳实践,越来越多的人在使用它。Angular 因其优点而备受赞誉,并拥有大量的社区支持。遗憾的是,尽管 Vue.js 有很多好处,但它并没有像它的竞争对手那样被开发者所接受。

    下面让我们从流行度和相关性两个方面比较下这三个框架:

    GitHub:目前,Vue.js 是最流行的框架,尽管它是最年轻的,这意味着越来越多的项目将使用它。

    谷歌搜索:在谷歌搜索中,React 查询请求最多,紧随其后的是 Vue.js。目前最不受欢迎的是 Angular.js。Angular.js 的人气在下降,而 Vue.js 的人气却在上升。

    劳动力市场需求:大多数职位空缺与 React.js 有关,然后是 Angular,再然后才是 Vue.js。

    Vue、React 和 Angular:该选哪个?

    为了选出最合适的库,你应该首先仔细分析这些框架并理解自己的需求。无论是有许多依赖项的现有项目,还是你想使用熟悉的库进行开发的新应用程序,Vue都不会给你带来任何麻烦。你可以继续使用 Bootstrap 或 Bulma 这样的 CSS 框架,保留为јQuery 或 Backbone 编写的组件,集成你最喜欢的库执行 HTTP 请求,或使用 Promise 对象。

    要开始使用 Vue 进行编程,你所要做的就是将 Vue.js 库连接到 Web 页面。不需要复杂的组装工具!从头到尾开发一个原型只需要 1 到 2 周的时间,这让你能够尽早并经常地收集用户反馈。Vue 2 引入了服务器端渲染(SSR)支持。这让你可以最小化初期的数据加载,并根据需要请求新的视图和资源。与高效的组件缓存相结合,可以进一步减少流量消耗。

    React库能够做一些令人惊叹的事情。因为整个用户界面都是用 JavaScript 定义的,所以你可以使用 JavaScript 的丰富功能在模板中执行各种操作。你只会受到 JavaScript 特性的限制,而不会受到模板框架特性的限制。当你想到完全用 JavaScript 定义的视觉效果时,你可能会想到很多引号、转义字符和createElement调用。别担心,React 库允许你(选择性地)使用可以与 JavaScript 代码共存的 HTML-like JSX 语法定义可视元素。

    React 与其他两个框架在以下理念上有所不同:

    与其说它是一个框架,不如说它是一个库(最初是为了处理 UI 而创建的);

    因为它不受框架的限制,所以它的功能更多——更适合专业人士,而不是初学者;

    在 Angular 中许多可以“开箱即用”的主要特性,在这里必须单独连接(这种方法有优点,也有缺点,对于初学者来说是缺点,因为需要做不必要的动作);

    更多地面向 JavaScript 而不是 TypeScript(尽管每个版本对 TS 的支持都在增加);

    更便于创建原生 Android 和 iOS 移动应用程序;

    拥有大量适用于各种场合的第三方库(多于 Angular)。

    Angular已经被用在了许多规模最大、最复杂的 Web 应用程序中。
    在这里插入图片描述
    程序就更简单轻松了。Angular 应用程序基于 MVC 设计模式构建,这个模型致力于创建具有以下特征的应用程序:

    易于扩展:如果你理解了基础知识,即使是最复杂的 Angular 应用,你也很容易就能够理解,这意味着你可以很轻松地扩展应用来提供实用的新功能。

    易于维护:Angular 应用程序很容易调试,Bug 很容易修复,这意味着长期运行的 Angular 应用也很容易维护。

    测试工具:Angular 有良好的 go mod 和端到端测试支持。因此,你可以在用户遇到之前找到并修复它们。

    标准化:Angular 基于浏览器的内部功能,不会给你的工作带来任何阻碍。这让你可以创建符合标准的 Web 应用程序,包含最新的功能(例如,各种 HTML5 API)、流行的工具和框架。

    这是一个框架——这意味着它设定了创建 Web 应用程序的规则,在初始阶段设定了特定的框架,让初学者可以少费脑筋。

    Angular 功能极多,如果需要额外的东西,可以连接第三方模块。

    自己是从事了五年的前端工程师,自己整理了一份最全面前端学习资料,
    从最基础的HTML+CSS+JS到HTML5的项目实战的学习资料都有整理,送给每一位前端小伙伴,
    有想学习web前端的,或是转行,或是大学生,还有工作中想提升自己能力的,正在学习的小伙伴,
    需要可以私聊我哟,这是我的前端开发qun,【六零三】【九八五】【九九三】,直接群里下载,
    对于学习web前端有任何问题(学习方法,学习效率,如何就业)都可以问我,最后可以点一波关注哟!
    

    Vue.js VS React:双向数据绑定

    在 Vue 中,你可以轻松地将组件变量绑定到表单字段。当你更改变量时,表单字段会更新,当用户更改表单字段时,组件变量也会更新。这比编写 React 中的事件处理程序要容易得多。

    此外,很多人喜欢用图表展示框架的受欢迎程度,其中 React 是 Angular 的 2 到 3 倍。它从创建移动应用程序(React Native)中获益颇多,因为与 Angular Ionic 相比,它更方便。至于 Web 应用程序(ReactJS)开发方面,一切就没那么简单了。

    例如,对于 Web 应用程序,我发现,使用 Angular 比使用 ReactJS 更方便。

    你可以自己尝试并比较不同的方向或技术。为此,你可以在谷歌趋势中输入一些关键字,它会为你画出漂亮的图表。

    Vue.js vs React vs Angular

    与之前的框架不同,Vue.js 是由一个人创建的,他认为 2013 年已经有的框架都太复杂。Vue 的第一个和第二个版本都是由一个人创建的,因此,在某些方面,它可能比竞争对手更糟糕,尤其是在安全方面。Vue 3 是由一个开发团队创建的,这意味着现在许多 Bug 和缺点都得到了修复,框架本身的效率也得到了提升。

    我应该学习 React 还是 Angular?

    最好同时学习 Angular 和 React。这两种框架各有优缺点。专家建议初学者首先学习 Angular,因为你所需的一切都是“开箱即用”的,这样更不容易犯错(框架会帮你控制)。在学习了 Angular 之后,你可以学习 ReactJS 和 React Native。另外,如果你只需要移动应用,你也可以直接跳到 React Native。事实上,你只需要学习框架的特性,仅此而已。其余的知识都是通用的(OOP、TypeScript、RP)。学习框架本身 1 到 2 周就足够了,你已经可以创建简单的 Web 应用程序了。

    结束语

    显然,这三个框架都非常强大,但同时又很不一样。它们有自己的优势和劣势,没有一个通用的公式可以用来决出一个绝对的赢家。选哪个框架好,要看你正在创建的应用程序和你的特定需求。在做决定之前有必要进行全面的研究。对于那些从事商业投资而不是单个项目的公司来说,这一点尤其重要。

    展开全文
  • 快速总结:为项目选择正确的javascript框架或库是...这篇文章旨在指导他们选择正确的javascript框架(或库):React vs VueReact vs Vue -选择正确框架的CTOs指南这是一个值得你考虑的案例!Rever Inc.,一家硅谷公司,...
  • vue hooks的基础)在后续的 react vue3 相关版本中,相关 hooks 能力都开始被更多人所接受。除此之外,solid.js、 preact 等框架,也是开始选择加入 hooks 大家庭。libs可以预见,虽然目前仍然是 class ...
  • Vue3.0 PK React17 ,谁胜?

    千次阅读 2021-01-26 08:30:00
    Vue 太 low,只适合小项目,大项目扛不起来””React 无数个回调,无数个选择表达式,this绑定…乱!““Vue好上手,岗位多”“大厂基本都用 React,不用 Vue ”...
  • Vue3.0 PK React17 ,谁胜?

    2021-03-17 00:03:07
    Vue 太 low,只适合小项目,大项目扛不起来””React 无数个回调,无数个选择表达式,this绑定…乱!““Vue好上手,岗位多”“大厂基本都用 React,不用 Vue ”…...
  • 但是在2018年2019年期间,我们看到了名为Vue.js的第三个“”团体“”的加入混战。展望2020年,这篇文章是一个综合指南,可能是您合适的解决方案:Angular,ReactVue。 如果您是从项目开始的开发人员,并且无法...
  • 我使用Vue和React已经很长一段时间了,两个框架上实践代码量都在10万行以上。不得不说都是都很不错的,帮助开发者减少很多工作量,某种框架是现代化Vue和React在两者之间的选择并不像选择苹果或香蕉一样简单,两者在...
  • 作者:Lucas HC ...来源:知乎 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 谢邀。这个问题其实已经不少人邀请过,在我的 timeline 上悬浮...2019 年已经行至年中,Vue 即将演进到 v3.0,...
  • Vue开发React Native应用详解

    千次阅读 2019-04-09 20:41:42
    概述 自从2015年4月React Native...不过,也有公司对React Native 并不看好,如Airbnb在去年就开始宣布弃用React Native ,不管如何,React Native 的跨平台的目的是很诱惑的。 紧接着google发布了跨平台框架Flutter...
  • 快速总结:为项目选择正确的...这篇文章旨在指导他们选择正确的javascript框架(或库):React vs VueReact vs Vue -选择正确框架的CTOs指南这是一个值得你考虑的案例!Rever Inc.,一家硅谷公司,在构建他们的最后...
  • 转自:InfoQ |作者:Northell译者:平川|策划:田晓旭随着社交媒体用户生成内容的爆炸式增长,互联网正在向更好的方向发展。为了跟上时代发展的步伐,提供更好的交互性,开发人员开始...
  • 对于开发人员而言,选择技术栈有时是一件相当棘手的...因此,本文不会简单地帮您选择出所谓最好的框架,而是完全由您的项目范围框架适用性,来决定自己的选择结果。当然,本文旨在帮助您更好地理解每一种框架的...
  • 在2019年,想象没有HTML,CSSJavascript的Web开发是不切实际的。... 企业软件开发人员最常见的一些查询是: Angular或ReactVue:哪个对我的下一个Web应用程序开发项目更好? 哪个Javascript框架或库提供最佳性...
  • 来自:开源中国 协作翻译链接:oschina.net/translate/web-frameworks-conclusions原文:sitepen.com/blog/2017/11/10/web-frameworks-conclusions/译者:凉凉_, wilde, 透过树叶的光等是该读些评论做一些总结的...
  • 根据我的经验,React 的文档、第三方工具模块要比 Vue 多得多。有时,我会为很多 Nuxt 问题而挣扎许久,搜索解决方案的过程中还会发现很多 Next(React)主题。 看看 Github 仓库,数字可以说明一切。 或它们各自...
  • Vue还在开发,怎么样还不知道。typeScripe比JavaScripe让我喜欢的多,我熟悉MVC,面向对象式编程。很多dom操作,初期配环境可能有些麻烦,但是我看这篇文章的时候已经配好了,以后用的时候,打一两行命令就可以了,...
  • 在这篇文章中,我们将对这个系列中所提到的每款框架做一个总结,包括我们所认为的强项弱项。另外,我们为你留下了一些值得思考的问题。 我是否需要使用框架? 如果不尝试回答这个问题就是我们的失职,这...
  • 选择技术堆栈有时会变成一项繁琐的任务,因为您需要考虑每个因素,包括预算,时间,应用程序大小,最终用户,项目目标资源。 无论您是初学者,开发人员,自由职业者还是项目架构师形成策略,明智地决定每个框架的...
  • 转载自:江湖术士 https://zhuanlan.zhihu.com/p/208249521 其实这个文章早在16年左右有感于 ng 的学习就想写了,但是却发现,除了 ng 以外,当时的 React Vue 都缺乏简单有效的逻辑复用方案,不过这也引导我将 ...
  • 它不像VueReact那样容易上手,对于较小的附带项目,我也不会选择它,但是对于生产应用程序,尤其是那些需要与多个人一起工作的应用程序,Angular是一个非常不错的框架。 React (React) According to NPM trends, ...
  • 适用于2019年流行前端框架库的NPM下载 React再次成为顶级库并且仍在增长,而jQuery令人惊讶地排名第二。 紧随其后的是Angular和Vue都拥有热情的开发人员强大的用户群。 去年,斯维尔特(Svelte)受到了很多关注,...
  • 在过去的一年中,前端开发的世界再次Swift发展,本文总结了2019年以来的所有重要事件,新闻和趋势。 适用于2019年流行的前端框架库的NPM下载 React再次成为顶级库,并且仍在增长,而jQuery居第二。 紧随其后...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,753
精华内容 1,101
关键字:

react和vue的未来趋势

友情链接: 4位BCD相加.zip