脚本宝典收集整理的这篇文章主要介绍了

都 9012了,该选择 Angular、React,还是Vue?

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <p>转载请注明出处:<a href="https://www.grapecity.com.cn/" rel="nofollow noreferrer" target="_blank">葡萄城官网</a>,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。</p> <hr> <p><span class="img-wrap"><img data-src="/img/bVbrwhF?w=602&amp;h=239" src="/img/bVbrwhF?w=602&amp;h=239" alt="139239-20190418152650475-2132001686.png" title="139239-20190418152650475-2132001686.png" style="cursor: pointer; display: inline;"></span></p> <p>尽管 Web开发的典型应用场景除了将服务器用作平台、浏览器用作客户端之外,几乎很少活跃于其他业务领域,但不可否认JavaScript 语言和框架的使用已经成为了主流。<a href="http://www.js-code.com/tag/angular" title="Angular" target="_blank">Angular</a>、<a href="http://www.js-code.com/tag/react" title="React" target="_blank">React</a> 和 <a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>,作为 JavaScript 的三大框架已逐步发展成熟,三者的差异性也越发明显,假设JavaScript还会继续流行十年左右,未来十年,你将会作何选择?</p> <h2 id="articleHeader0"><a href="http://www.js-code.com/tag/angular" title="Angular" target="_blank">Angular</a></h2> <p><a href="http://www.js-code.com/tag/angularjs" title="AngularJS" target="_blank">AngularJS</a> 自2009年诞生,至今已有十年历史。在这短短十年中,其对 Web 社区的发展产生了十分深远的影响。作为一款优秀的 JavaScript 框架,在其推出一年后,便在全球引起了广泛关注,如今更是在Google的 600 多款产品中得以成功运用,如Firebase控制台、谷歌分析、谷歌快车、谷歌云等。</p> <p><a href="http://www.js-code.com/tag/angularjs" title="AngularJS" target="_blank">AngularJS</a>有着诸多核心特性,包含:MVC(Model–view–controller)、模块化、自动化双向数据绑定、语义化标签、依赖注入等。<a href="http://www.js-code.com/tag/angular" title="浏览关于“Angular”的文章" target="_blank" class="tag_link">Angular</a> 最新版 7.0.0 已于2018年10月发布,下一版本预计将于今年第二季度正式上线。以下是Angular 7 针对性能、命令行工具和Material Design组件的优化项:</p> <ul> <li> <strong>性能方面</strong>:Angular 7 新增的虚拟滚动优化了单页面的呈现方式,对于那些吸引访问者继续向下滚动的clickbait网站来说,这将派上大用场。Angular 7 的另一个性能亮点被称为Bundle Budgets,它用于预警开发人员当前使用的JavaScript包的大小,当JavaScript 包超过 2MB 时开始预警,在达到 5MB 后直接中断生成。</li> <li> <strong>命令行提示</strong>:当在CLI中键入某些命令,如 ng new 或者 ng add @angular/material 时,Angular 7 会提示用户,让你找到像路由或S<a href="http://www.js-code.com/tag/css" title="CSS" target="_blank">CSS</a>支持之类的内置特性,从而简化编码体验,帮助开发者发现新功能或提供灵感。</li> <li> <strong>视觉风格</strong>:谷歌在Angular 7之前已于2018年更新了Material.io,用户更新后会出现细微的视觉差异:如,UI结构层次更为大胆、形状的边角更加圆滑,五种全新的 Icon 样式,以及一个非常时尚且现代化的拖放模块。</li> </ul> <p><span class="img-wrap"><img data-src="/img/bVbrwhR?w=600&amp;h=294" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="139239-20190418165636710-1519118459.gif" title="139239-20190418165636710-1519118459.gif" style="cursor: pointer;"></span><br />Angular 7 拖放效果</p> <h2 id="articleHeader1"><a href="http://www.js-code.com/tag/react" title="React" target="_blank">React</a></h2> <p>Angular的出现,在Web社区引发了强烈轰动。两年后,Facebook 也推出了一款同样具备丰富功能的JavaScript UI组件库——<a href="http://www.js-code.com/tag/react" title="浏览关于“React”的文章" target="_blank" class="tag_link">React</a>。</p> <p>使用React,意味着您将用一种更简约的方式开始前端开发,这也是大部分开发人员所期待的:</p> <ul> <li>没有依赖注入</li> <li>使用<a href="http://www.js-code.com/tag/jsx" title="JSX" target="_blank">JSX</a>(一种基于JavaScript构建的类似XML的语言),而非经典模板,创建虚拟<a href="http://www.js-code.com/tag/dom" title="DOM" target="_blank">DOM</a></li> <li>使用状态管理set<a href="http://www.js-code.com/tag/state" title="State" target="_blank">State</a>和Context <a href="http://www.js-code.com/tag/api" title="API" target="_blank">API</a></li> <li>XSS保护</li> <li>用于单元测试组件的实用程序</li> </ul> <p>不多,却正好够用,您完全可以根据自己的需要,自由添加任何组件库,它们包括:</p> <ul> <li>路由:React-router</li> <li>获取 HTTP请求:Fetch(或ax<a href="http://www.js-code.com/tag/ios" title="ios" target="_blank">ios</a>)</li> <li>各种各样的<a href="http://www.js-code.com/tag/css" title="CSS" target="_blank">CSS</a>封装技术</li> <li>用于单元测试的Enzyme</li> </ul> <p>Google 和 Facebook 作为 Web 社区开源项目的主要发起者,彼此之间从未停止过竞争,尤其是关于 Angular 和 React 之间的辩论已经持续了四年之久。但严格来说,将Angular与React进行比较并不完全公平,因为Angular是一个功能齐全、组件丰富的框架,而React只是一个UI组件库。为了解决这个问题,我们将就 Angular 框架中的一些常用组件库与 React 进行对比。</p> <h2 id="articleHeader2">组件功能:React VS Angular</h2> <p>Angular提供了比React更多开箱即用的功能,如:</p> <ul> <li>依赖注入</li> <li>基于<a href="http://www.js-code.com/tag/html" title="HTML" target="_blank">HTML</a>的扩展模板</li> <li>由 @angular / router 提供的路由</li> <li>使用 @angular / common / http 的Ajax请求</li> <li>用于构建 @angular /forms 的表单</li> <li>组件<a href="http://www.js-code.com/tag/css" title="浏览关于“CSS”的文章" target="_blank" class="tag_link">CSS</a>封装</li> <li>XSS保护</li> <li>用于单元测试组件的实用程序</li> </ul> <p>其中,依赖注入等功能作为 Angular 的核心,您无法选择不使用它们,这好像一把双刃剑,在带来强大功能模块的同时,也使得Angular 变得越来越笨重。</p> <p>当然,Google工程师已经意识到了这个问题,也在一定程度上致力于简化Angular框架的复杂性,希望在 Angular 8 中能让人耳目一新。</p> <h2 id="articleHeader3"><a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a></h2> <p>在React 与 Angular孰优孰劣的讨论逐步升温的时候,另一个JavaScript框架<a href="http://www.js-code.com/tag/vue" title="浏览关于“Vue”的文章" target="_blank" class="tag_link">Vue</a>抵达了现场,使得这场最优Web开发框架的角逐变得更加白热化。</p> <p>Vue.js 是由Google的核心开发工程师——尤雨溪(Evan You)所创建的框架,作为一个比 React 和 Angular 都更年轻的框架,Vue 从它们那里借鉴了好的部分,即函数式和面向对象编程的混合体。2014年2月(在微软收购GitHub平台四年之前),Evan You在GitHub上发布了第一个稳定版本的Vue,标志着一个构建数据驱动的 Web UI的渐进式框架就此诞生。</p> <div class="google-auto-placed ap_container" style="text-align: center; width: 100%; height: auto; clear: none;"><ins data-ad-format="auto" class="adsbygoogle adsbygoogle-noablate" data-ad-client="ca-pub-6330872677300335" data-adsbygoogle-status="done" style="display: block; margin: auto; background-color: transparent;"><ins id="aswift_4_expand" style="display: inline-table; border: none; height: 0px; margin: 0px; padding: 0px; position: relative; visibility: visible; width: 697px; background-color: transparent;"><ins id="aswift_4_anchor" style="display: block; border: none; height: 0px; margin: 0px; padding: 0px; position: relative; visibility: visible; width: 697px; background-color: transparent; overflow: hidden; opacity: 0;"><iframe width="697" height="175" frameborder="0" marginwidth="0" marginheight="0" vspace="0" hspace="0" allowtransparency="true" scrolling="no" allowfullscreen="true" onload="var i=this.id,s=window.google_iframe_oncopy,H=s&amp;&amp;s.handlers,h=H&amp;&amp;H[i],w=this.contentWindow,d;try{d=w.document}catch(e){}if(h&amp;&amp;d&amp;&amp;(!d.body||!d.body.firstChild)){if(h.call){setTimeout(h,0)}else if(h.match){try{h=s.upd(h,i)}catch(e){}w.location.replace(h)}}" id="aswift_4" name="aswift_4" style="left:0;position:absolute;top:0;border:0px;width:697px;height:175px;"></iframe></ins></ins></ins></div> <p>尽管没有得到谷歌和Facebook等科技巨头的支持,但自2018 年以来,Vue一直受到开发者的广泛关注。<a href="https://2018.stateofjs.com/front-end-frameworks/vuejs/" rel="nofollow noreferrer" target="_blank">从去年几大主流前端开发框架的热度来看</a>,大多数知晓 Vue 的开发者都表示有兴趣学习它。</p> <p>也许,那些已经熟练掌握Angular和React前端框架的开发人员也应该花些时间去了解一下这个简单、小巧、省心的前端框架,希望下面的内容能对你有所帮助。</p> <h2 id="articleHeader4">学习曲线:React VS Vue</h2> <p>如果前端框架的学习不包含TypeScript(即便 TypeScript 通常被认为是JavaScript的增集,但要完全掌握仍需要学习额外的类处理过程),那么 React和Vue的学习速率都高于Angular。</p> <p>相对于 React,许多初学者认为Vue的学习成本更低,因为它提供了更加丰富的资源文档和中文支持。事实上,Vue和React学习速率的实际情况是大致相同的,由于大部分Vue的学习资料直接以单个Web应用程序的开发实践开始,直观且清晰的代码逻辑的确可以帮助初学者更快入门,但是,随着学习内容的深入,当您需要开发复杂的Web应用程序时,花哨灵活的指令和逻辑反而会让人觉得Vue比React更难掌控。</p> <h2 id="articleHeader5">技术社区:React VS Vue</h2> <p>React是一个已经存在近十年的Facebook开源项目,因此它拥有更加成熟的技术社区支持。尽管 Vue 已经成功地在短短几年间吸引了相当多的追随者,但在它真正建立出一整套完善且丰富的生态系统之前,仍需要更多人和时间的打磨。</p> <p>当你看到许多使用Vue完成的项目时,你会注意到,其整体的设计理念更趋向现代化,这是因为 Vue 仍是一个相对较新的框架,比如,<a href="https://vuetoronto.com/" rel="nofollow noreferrer" target="_blank">这个示例</a>。</p> <div class="google-auto-placed ap_container" style="text-align: center; width: 100%; height: auto; clear: none;"><ins data-ad-format="auto" class="adsbygoogle adsbygoogle-noablate" data-ad-client="ca-pub-6330872677300335" data-adsbygoogle-status="done" style="display: block; margin: auto; background-color: transparent;"><ins id="aswift_5_expand" style="display:inline-table;border:none;height:175px;margin:0;padding:0;position:relative;visibility:visible;width:697px;background-color:transparent;"><ins id="aswift_5_anchor" style="display:block;border:none;height:175px;margin:0;padding:0;position:relative;visibility:visible;width:697px;background-color:transparent;"><iframe width="697" height="175" frameborder="0" marginwidth="0" marginheight="0" vspace="0" hspace="0" allowtransparency="true" scrolling="no" allowfullscreen="true" onload="var i=this.id,s=window.google_iframe_oncopy,H=s&amp;&amp;s.handlers,h=H&amp;&amp;H[i],w=this.contentWindow,d;try{d=w.document}catch(e){}if(h&amp;&amp;d&amp;&amp;(!d.body||!d.body.firstChild)){if(h.call){setTimeout(h,0)}else if(h.match){try{h=s.upd(h,i)}catch(e){}w.location.replace(h)}}" id="aswift_5" name="aswift_5" style="left:0;position:absolute;top:0;border:0px;width:697px;height:175px;"></iframe></ins></ins></ins></div> <p>众多周知,React所包含的工具、组件库和代码包的数量更多,但Vue灵巧、精致和简单却更加<a href="https://madewithvuejs.com/" rel="nofollow noreferrer" target="_blank">令人印象深刻</a>。</p> <h2 id="articleHeader6">安全性:React VS Vue</h2> <p>前端几乎无安全可言!当然,这里所指的安全性,仅仅是 React 和 Vue 这两个框架之间的对比,相对于React,Vue更为小众且不同,因此在面对大规模黑客攻击的时候,React更容易成为目标。</p> <p>Vue和React同样都容易受到<a href="https://hostingcanada.org/most-common-website-vulnerabilities/" rel="nofollow noreferrer" target="_blank">跨站点脚本(XSS)攻击</a>,这也是Web应用程序中最为常见的安全漏洞。XSS攻击允许攻击者将客户端脚本注入到其他用户查看的网页中,以影响其关联的任何JavaScript Web应用程序。</p> <p>PS:缓解此问题的<a href="https://www.owasp.org/index.php/XSS_%28Cross_Site_Scripting%29_Prevention_Cheat_Sheet" rel="nofollow noreferrer" target="_blank">最佳方法</a>是将数据保存在脚本之外,加入黑名单机制并从白名单中进行数据验证。</p> <h2 id="articleHeader7">灵活性:React VS Vue</h2> <p>这也是争议最大的地方。React 专注于 UI,所以在构建 UI 组件时可以从它那里获得很好的支持。Vue作为一个渐进式框架,只允许使用最基本的功能来构建应用程序,但同时也提供了一些开箱即用的东西:如,用于状态管理的 Vuex、用于应用程序 URL 管理的 Vue Router、Vue 服务器端渲染。</p> <p>Vue剥离了许多元素,相比之下React更加全面。但如果您正在寻找一种精简、新颖、简单易学、样板代码少、高性能、灵活且完整的前端框架,Vue更加适合;当然,如果您打算使用低版本<a href="http://www.js-code.com/tag/jquery" title="jQuery" target="_blank">jQuery</a>代码,Vue也同样支持。</p> <div class="google-auto-placed ap_container" style="text-align: center; width: 100%; height: auto; clear: none;"><ins data-ad-format="auto" class="adsbygoogle adsbygoogle-noablate" data-ad-client="ca-pub-6330872677300335" data-adsbygoogle-status="done" style="display: block; margin: auto; background-color: transparent;"><ins id="aswift_6_expand" style="display: inline-table; border: none; height: 0px; margin: 0px; padding: 0px; position: relative; visibility: visible; width: 697px; background-color: transparent;"><ins id="aswift_6_anchor" style="display: block; border: none; height: 0px; margin: 0px; padding: 0px; position: relative; visibility: visible; width: 697px; background-color: transparent; overflow: hidden; opacity: 0;"><iframe width="697" height="175" frameborder="0" marginwidth="0" marginheight="0" vspace="0" hspace="0" allowtransparency="true" scrolling="no" allowfullscreen="true" onload="var i=this.id,s=window.google_iframe_oncopy,H=s&amp;&amp;s.handlers,h=H&amp;&amp;H[i],w=this.contentWindow,d;try{d=w.document}catch(e){}if(h&amp;&amp;d&amp;&amp;(!d.body||!d.body.firstChild)){if(h.call){setTimeout(h,0)}else if(h.match){try{h=s.upd(h,i)}catch(e){}w.location.replace(h)}}" id="aswift_6" name="aswift_6" style="left:0;position:absolute;top:0;border:0px;width:697px;height:175px;"></iframe></ins></ins></ins></div> <p>React的灵活性则更多依赖于其背后强大的技术社区,在 Facebook 的强力支撑下(Facebook 的 React 团队包括了 10 名专职开发人员),提供了更多工具、UI库和教程。</p> <p>如果您的开发理念更趋向全栈文化、跨平台、保持独特、引领潮流而不是跟随,那么您一定会喜欢Vue;但如果您的项目需要大量熟练使用该框架的前端开发者、大量的工具及第三方库,那么您最好使用React。<strong><a href="https://www.grapecity.com.cn/developer/wijmojs/framework" rel="nofollow noreferrer" target="_blank">不过小孩子才做选择,您最需要的应该是一个全面兼容 Angular、React和Vue的前端开发工具包——WijmoJS。</a></strong></p> <h2 id="articleHeader8">Vue的未来</h2> <p>截至2019年初,Angular、React和Vue之间的竞争持续升温,越来越多的开发人员开始抛弃Google项目,就<a href="https://www.grapecity.com.cn/developer/wijmojs" rel="nofollow noreferrer" target="_blank">商业开发工具的提供者</a>而言,Vue的未来一片光明。</p> <p>为开发速度更快的 Web 应用程序而选择了Vue的人有明显的增长,Vue 很有趣,开发起来也很简单。虽然,React依托于其庞大的生态圈,在目前为止,处理更复杂的 Web 项目时占据优势,但随着前端社区内大量 Vue 追随者的出现、Vue 社区稳定增长的良好氛围,都在暗示着 Vue 很快就会变得像 React 一样受欢迎。</p> <h2 id="articleHeader9">Angular、React,还是Vue?</h2> <p>作者尽量保持着公正的态度,客观地分析了上述三个前端框架,而作为前端开发者,面对 Angular、React 和 Vue,你会作何选择?为什么?如果您有任何问题或意见,欢迎在文末回复讨论。</p> <p></code></p>

总结

以上是脚本宝典为你收集整理的

都 9012了,该选择 Angular、React,还是Vue?

全部内容,希望文章能够帮你解决

都 9012了,该选择 Angular、React,还是Vue?

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过