当前位置: 首页 > Web前端 > vue.js

为什么那么多前端选择使用Vue.js框架?

时间:2023-03-31 23:05:07 vue.js

ProgramLife我们选择了这个IT行业,自然希望在这个行业走得更远。相信没有人会甘于平庸。每个人都希望在自己的行业和领域有所建树,实现自己的价值,从而获得社会的认可。而如果我们要实现这个目标,就必须投入更多的时间和精力,才能赢得更多的机会。在成长的过程中,难免踩一些坑,走一些弯路,那么有什么方法可以避免踩一些坑,走一些弯路呢?幸运的是,答案是肯定的。站在巨人的肩膀上,我们才能看得更远。JohnResig发布了第一个版本的jQuery,将我们带入了jQuery时代;尤玉玺创造了Vue,让我们正式进入了Vue时代。时代。这些领导者让我们看得更远,让我们的工作和生活更轻松。所以这应该是所有前端开发者选择Vue的根本原因吧!为什么框架会存在?这个世界上任何事物的存在都必须解决这个世界上的一些问题。同理,框架为什么存在?框架的存在也一定是解决了某个或某类问题。这里引用Vue的作者尤雨熙的话:框架的存在就是为了帮助我们处理复杂性。框架作为一种工具来帮助我们处理一类复杂的问题。我认为这是框架的定义。当然,框架本身是有复杂性的,就像我们用扳手拧螺丝一样,扳手就是框架,是工具,工具本身是有学习成本的,但是它的学习成本比较低。我们使用这个工具来解决一个没有扳手会变得相当复杂的问题,就像拧螺丝一样,这和你在工作中使用前端框架解决一个复杂的项目时所经历的过程是一样的。因此,在我们使用的框架(tool-wrench)和我们要解决的问题(complexity-screw)之间做出选择是很自然的,我们倾向于使用简单的工具。解决一个复杂的问题就是框架的意义。所以我们本能地希望框架越来越简单,它能解决的问题越来越复杂。幸运的是:这个时代正在按照我们的希望发展??。主流框架目前讨论的前端框架主要有3个:AngularReactVue看看他们在GitHub上的Star历史和NPM的下载趋势图。Angular、React和Vue的GitHubStar历史:npm下载趋势图:可以看出,在GitHub上,Vue的数据涨幅最快,在2018年6月28日已经超过React,成为最流行的前端框架。在npm中,React的数据遥遥领先,得益于React强大的社区力量。我们不能否认,React社区作为目前最活跃的前端社区,提供了很多优秀的想法和理念,为React提供了强大的生态支持,同时也让我们在使用时可以做出更多的选择。选择周围的框架。当然,这三个框架都很好,我们不讨论它们的优缺点,我们的选择只是基于我们的权衡:我们希望工具足够简单,但它能解决的问题也足够复杂。够了,不是吗?Angular:Angular期望做很多事情,比如它会包含自己的路由,这让我们在决定使用Angular时不得不接受所有这些,这使得学习成本更高,但同时,选择会变少,但有时候选择变少并不是坏事,它能让我们更加专注。React和Vue:React和Vue专注于界面,其他的都会有各种配套工具,比如路由,或者状态管理工具,所以你在使用的时候可能需要做更多的选择,这种方式使得学习曲线自己(React,Vue)比较扁平。从上面的分析可以看出,Angular提供了一个复杂的工具来解决一组复杂的问题。另一方面,React和Vue专注于解决一个特定的问题,而将其他问题交给它们的生态系统,这也会让我们花更多的时间来选择合适的外围工具。因此,这些框架各有优缺点,没有绝对的好坏之分。我们选择什么样的工具取决于我们面临什么样的问题。没有人想用大炮打蚊子,也没有人想用苍蝇拍打大象。我们喜欢恰到好处,追求事半功倍。如果您的想法相同,那么至少我们的基本概念是相同的。Vue的特性经历了这么多铺垫,终于到了本课程内容的重点:Vue,它的魅力是什么?为什么值得我们花时间学习?下面我们就来看看Vue都有哪些特性。我们将从以下8个方面来分析Vue:MVVM框架单页应用轻量级易学MVVM框架是:Model-View-ViewModel,如下:那么这个MVVM框架应该怎么理解呢?它的第一个View相当于页面中的DOM,最后一个Model相当于数据源,如下图:其中a标签就是DOM,data对象就是数据源。两者之间永远不会有直接的通信关系,它们的所有连接都是通过ViewModel进行的,也就是监视器。监视器会负责检测数据的变化,然后将数据实时显示在页面上。比如你把text的内容改成“HelloVue”,那么a标签显示的内容就会自动变成“HelloVue”。这样就不需要手动操作DOM,所有对DOM的操作都由monitor来完成。如果你之前写过复杂的DOM操作(比如**.parent().parent().parent()...),你会发现这个方法带来的便利。Vue就是利用了这种MVVM框架形式,通过声明式渲染和响应式数据绑定,帮助我们完全避免DOM操作。(2)单页应用单页应用(SPA),泛指:一个页面就是一个应用(或子应用)。随着技术的发展,现在的前端网页不仅仅局限于在浏览器上展示,在手机APP和微信上展示的机会也越来越多公众号。那么如果我们把传统的多页申请表放到手机上会是什么样子呢?当进行页面跳转打开新页面时,会变成这样:等待的花都谢了。有没有?而如果使用单页表单开发,就不会出现这样的情况。因为我们整个应用只有一个页面,所以当我们的单页加载时,不会有对该页面的网络请求。生态中有Vue和Vue-Router,开发复杂的单页应用非常方便。(3)轻量易学我们知道网页中引入的JS体积越大,加载时间越长,反之,体积越小越省时。所以我们更倾向于使用更小的JS文件,这也是为什么在生产版本中引入.minJS的原因。下面是我的Vue官网的截图:Vue最新的稳定版是2.5.16。从截图中我们可以看出,Vue的生产版本只有30.90KB大小,几乎不会影响我们的网页加载速度。同时,由于Vue只专注于视图层,单独一个Vue就像一个库,所以我们的学习成本非常低。(4)渐进与兼容渐进的框架是:我只做我该做的,不会要求你太多。Vue的核心库只专注于视图层,不仅易于使用,而且易于与第三方库或现有项目集成。这是Vue官网上的一句话。上面说了,Vue只做界面,其他的交给它的周边生态去处理。这就需要Vue对其他框架有最大的支持。相容程度。比如一开始只是想做一个静态网站,只能引入Vue来搭建界面。过段时间,如果你想给网站增加访问网络的功能,那么可以引入axios(Vue官方推荐)或者其他(哪怕是jQuery)网络请求框架,后面随着你的网站越来越大更大一点,当你想把你的网站变成一个大型的web应用时,你可以引入一些其他你需要的JS文件,比如Loadsh.js、Velocity.js等。(5)视图组件化所谓视图组件化就是把我们的网页拆分成一个个的组件,如下:Vue让组件组装一个页面,每个组件都是一个可重用的Vue实例,组件可以包含自己的数据、视图和代码逻辑。比如:CSDN的个人资料模块大家都很熟悉。当我们的web应用中有多个页面使用这个个人数据模块时,我们可以将其封装成一个组件。这个组件有独立的代码逻辑、CSS样式、数据等,在任何我们需要使用它的地方,我们可以通过Vue.component('component-name',{...});这个方法是直接导入的。(6)VirtualDOMVirtualDOM即虚拟DOM。我们都知道,浏览器在处理DOM操作时,会存在性能问题。这也是我们使用jQuery或者原生JavaScript频繁操作DOM进行数据渲染的时候。经常是我们页面卡顿的原因。虚拟DOM就是通过JavaScript的各种操作,预先计算出最终需要生成的DOM,并进行优化。计算完成后,会将计算出的DOM放入我们的DOM树中。由于这种操作方式不进行真正的DOM操作,所以称为虚拟DOM。我们之前说过:Vue通过声明式渲染和响应式数据绑定帮助我们完全避免对DOM的操作。Vue之所以能够完全避免对DOM的操作,是因为Vue采用了虚拟DOM的方式,不仅避免了我们对DOM的复杂操作,而且大大加快了我们应用程序的运行速度。(7)来自社区的支持虽然Vue社区在国际上没有React社区那么繁荣,但是得益于Vue的本土化身份(Vue的作者是中国游玉玺),再加上Vue本身的实力,所以国内很多社区都有出现了,比如https://www.vue-js.com/,https://vuejs.com.cn/等。这种情况在其他框架中从未出现过,让我们在学习或者使用的时候得到更多的帮助看。(八)Vue未来的发展方向Vue是中国人游玉玺在谷歌工作时为了工作方便而开发的一个库。在使用Vue的过程中,他突然发现喜欢它的人越来越多。在上面。于是尤雨熙就进入了工作维护状态。在这种情况下,Vue依然在飞速发展。现在游玉玺已经正式从谷歌离职,开始全职维护Vue。同时,数十位优秀的开发者加盟,他们致力于让Vue成为最流行的前端框架。事实证明,Vue确实在朝着越来越好的方向发展(从Angular、React、Vue的对比图可以看出Vue的势头)。所以我认为没有必要担心Vue的未来发展。至少在没有新的颠覆性创新出现之前,Vue会越来越好。