一篇文章让你明白为什么要学习Vue.js

一篇文章让你明白为什么要学习Vue.js

Vue.js是当今最流行的Javascript前端框架。Github上已经获得了15万以上的星星,可见大家都很关注这个框架。那么,为什么这个框架如此有吸引力,它的优点在哪里?今天这篇文章将让你明白为什么要学习和使用Vue.js。

什么是Vue.js

Vue.js是Evan You开发的JavaScript框架。 它是用于构建用户界面的渐进式框架。 它着重于应用程序的视图层,并用于构建单页应用程序(SPA)。 这个框架就像AngularJS一样,但是更快,更轻便。所谓渐进式框架的意思就是你可以根据项目的实际情况一步一步利用Vue.js提供的功能构建你的应用。Vue.js的核心思想就是小而灵活,不求全,只求精。

为什么要学习和使用Vue.js

Vue.js与其他整体框架之间的主要区别在于,Vue.js从其创建开始就完全可以使用。 由于核心层仅集中在视图层,因此Vue易于集成到我们的项目中。 这意味着我们不会为冗长的设置工作所困扰。 此外,Vue.js具备构建强大的单页应用程序的能力。选择它的原因可以归结为以下几个方面:

  • 学习门槛低

Vue.js包含经典的Web技术,并在它们之上构建。这与React陡峭的JSX(JavaScript + HTML文件)学习曲线相比,Vue.js使用基于HTML的模板和单文件组件,使开发人员可以编写实际的CSS(并支持CSS模块和预处理器)。在JavaScript库之外执行此操作的好处是降低了复杂性,并且再次减小了构建大小。


一篇文章让你明白为什么要学习Vue.js

不同Javascript框架的学习曲线比较

  • 小巧灵活

Vue.js建立在最小的内核上,尤其是当你想要一个不会在代码库中增加大量体积的轻量级框架时。你可以在此基础上根据需要进行最大程度地扩展 ,或仅使用所需的部分,并将这些部分直接与现有应用程序集成。该核心库全都与“视图”(MVC范例中的“ V”)有关,该视图仅专注于应用程序或网站的用户看到并与之交互的内容。

  • 性能优异

如今,每个热门的新框架(React.js,Ember.js和现在的Vue.js)似乎都在整合虚拟DOM。那么什么是虚拟DOM?为什么Vue通常更快?

尽管每个人都倾向于将DOM当作HTML文档本身来讨论,但实际上,它是浏览器解析HTML文档时创建的数据结构。使用JavaScript对DOM进行更改的成本很高,因为浏览器必须分配资源以查找进行更改所需的DOM节点。现代的动态单页Web应用程序(SPA)可以具有数千个节点,因此频繁更新将不可避免地减慢页面速度。


一篇文章让你明白为什么要学习Vue.js

虚拟DOM

虚拟DOM通过在JavaScript中提供DOM的完整表示来解决此问题,当真实DOM需要更改时,可以根据需要进行更新。更改JavaScript对象比更改DOM本身快速。当真实DOM与虚拟DOM同步时,它可以使更新变得更有效率,而不必每次更改都重新绘制整个DOM。

至于使Vue.js虚拟DOM“非常快”的原因在于运行时使用gzip算法压缩并压缩时只有20 kb,Vue.js明显比其竞争对手更小(Ember 2.2.0和Angular 2大约111 kb)。另外,无需担心的开箱即用代码会大大减少优化工作。


一篇文章让你明白为什么要学习Vue.js

不同Javascript框架的性能比较

  • 支持服务器端渲染

Vue.js与大多数JavaScript框架一样,在其中使用客户端渲染(CSR),在这种情况下,浏览器在渲染网页时会进行繁重的工作。但是,Vue.js还从React那里学到了一项技能,那就是支持服务器端渲染(SSR),这使得应用在向用户提供服务之前在服务器上预渲染页面。

那么为什么要使用SSR?一个主要优点是服务器上呈现的内容无需等待所有JavaScript均已下载并执行即可显示,从而大大减少了页面加载时间。另一个主要优点是,对于搜索引擎爬虫来说,完全渲染的页面更易于阅读,从而带来更好的SEO(搜索引擎优化)。

  • 易于管理状态

随着你开始扩展应用程序,状态管理变得越来越重要。对于基于组件的框架(例如Vue或React),尤其如此。应用程序中的多个组件正在共享数据并彼此交互。随着这些交互的复杂性越来越大,将越来越难以理解或预测数据状态,并且可能会出现错误。

Vuex是一个应用程序设计模式和库,它从Flux,Redux和Elm Architecture汲取了灵感。在Vuex中,共享状态是在一个中央位置进行管理的,这是一个全局单例,它是Flux的“存储”的代名词。这允许组件树充当一个大型“视图”,任何组件都可以与之交互以访问状态或触发动作,而无论在树中的位置。组件可以从存储中自由读取数据,但不能直接更改数据。相反,它们通知存储,存储随后使用称为突变的Vuex函数更新状态。

讲了这么多,总结一下就是Vue.js小巧灵活,性能优异,易于学习。在项目中,尤其是单页面应用中,Vue.js将是你提高开发效率和应用性能的利器。欢迎对Vue.js有兴趣的朋友在留言发表你的见解。


分享到:


相關文章: