在过去一年里,前端开发发展迅速,前端工程师的薪资亦是水涨船高。2019 更是热度不减,而作为近年来尤为热门的前端框架,Vue.js 自是积累了大量关注。那么,Vue.js 是适合你的框架吗?

 
 

作者 |Tim Han

译者 | 苏本如

责编 | 仲培艺

对于大多数人来说,现在要构建一个新的前端应用,对框架/库的选择在很大程度上都是在 Angular 和 React 中二选一。很多时候,人们不会给 Vue.js 足够的关注。因此,我想分享一些有关 Vue.js 的信息,以及我在使用 Vue.js 来构建生产应用中获得的一些个人经验。现在让我们一起来问这个问题:Vue.js 是适合你的框架吗?

注意:我并不想说 Vue.js 比 React、Angular 或者其它的任何前端框架好。这里我分享的只是我在项目中使用 Vue.js 而获得的一些个人体验。

对于那些刚接触 Vue.js 或从未听说过 Vue.js 的人来说,Vue.js 是一个 Javascript 前端框架,最初于 2014 年发布,由 Evan You 开发。从那时起,Vue.js 就在很短的时间内获得了许多前端开发人员/工程师的广泛欢迎。使用 Vue.js 的一些著名公司包括 GitLab、阿里巴巴、BuzzFeed 等等。

这是一个好问题!可以列出许多优点,而根据我的个人经验,下面 4 点是最突出的优点:

1. 轻量化

2. 低复杂性

4. 低学习曲线(对初学者友好)

现在让我们来了解每一点的细节。

使用 Vue.js 来开发生产应用或个人项目的一个显著优势是它是一个相对轻量化的框架/库。让我们看看不同前端框架/库的下载空间:

轻量化非常有用,尤其是在快速构建一个简单应用的时候。我个人的用例是为工程团队的内部工具构建 UI。

这恰好是 Vue.js 中我最喜欢的部分,因为在使用 React 构建许多应用之后,一旦在混合代码库中添加状态管理,随着应用程序变大,代码库通常会变得非常复杂。我注意到 React 应用变得复杂的原因之一是 JSX 模板、 lifecycle(生命周期)方法和其他方法都存在于同一个对象中。这常常使理解逻辑流程变得非常困难。那么,让我们看看 Vue.js 代码是怎么写的:

  

请注意,这里 HTML 模板、必要的方法和样式表都是独立的,因此很容易知道要查看的是代码的哪个部分。这意味着代码库相对容易维护,而不必每次更新代码时都增加代码库的复杂性。

就像 React 一样,Vue.js 实现了使用虚拟 DOM 来操作/渲染视图。通过使用虚拟 DOM,用户界面将通过在每次需要更改时不渲染真实的 DOM,而只是呈现虚拟 DOM 和真实 DOM 之间的部分差异,进而获得更好的性能。

我相信很多人都经历过这种情况。

大多数从事 Web 开发的人都会学习以下三种基础技术:HTML、CSS 和 JavaScript。想象一下一个初学者必须学习一个叫做 JSX 的新东西,而不是 HTML。虽然 JSX 看起来类似于 HTML,但确实有很多不同之处将 JSX 与 HTML 区分开来,而这种学习就不是 Vue.js 所必需的。

如上面所示,Vue.js 使用与 HTML 相同的标记名,这使得将知识从 HTML 传输到 Vue.js 更加容易。此外,代码的模块化结构有助于理解 Vue.js 组件的不同动作部分。

对于那些熟悉 React 的人来说,学习 Vue.js 是小菜一碟,因为两者之间有很多相似之处。

正如我想说的,Vue.js 非常棒,像任何其它框架/库一样,本身几乎没有什么缺点。我还是在下面列出我所知道的 Vue.js 为数不多的几个缺点:

1. 社区小

2. 英文写作资源少

3. 就业机会少

我早期在用 Vue.js 开发项目时遇到的一个问题是,有时很难找到在应用开发中遇到的非常具体的问题的支持。因为 Vue.js 社区的规模仍然不如 Angular 或 React 那么大。

另外一个我遇到的问题是,当我认为自己找到了帮助时,他们的回答往往是用中文写的。就好象我以为我得救了的时候,其实我只是吞下了一个饵。后来,我发现 Vue.js 在亚洲国家比像在美国这样的英语国家更受欢迎。(备注:对应原文英文背景)

最后,在目前的状态下,使用 Vue.js 的公司并不多,因此很难找到需要 Vue.js 专业技能的工作。所以,我建议在以下情况下使用 Vue.js:个人项目、小规模的 UI 应用,或者出于好玩的目,以便你能够在相对较短的时间内为你的应用提供一个轻量级的用户界面。

现在,是时候回答这个问题了:Vue.js 是适合你的框架吗?

前端开发 vue,angular,react框架对比2的更多相关文章

  1. Android &Swift iOS开发:语言与框架对比

    转载自:http://www.infoq.com/cn/articles/from-android-to-swift-ios?utm_campaign=rightbar_v2&utm_sour ...

  2. Vue于React特性对比(三)

    最近重学React,再次和vue做了对比. 一,为官方插件提供便利的第三方插件横行 React仅仅是一个ui框架.虽然官方提供了redux,react-router:但也有第三方的redux-thun ...

  3. Vue和React的对比

    今晚我们来搞一搞Vue和React的对比好吧,话不多说今天我们直接开搞可好,各位小老板,开始吧 1. react整体是函数式的思想,把组件设计成纯组件,状态和逻辑通过参数传入, 所以在react中,是 ...

  4. 前端开发 vue,angular,react框架对比1

    转载自:https://www.cnblogs.com/hubgit/p/6633214.html 首先,我们先了解什么是MVX框架模式? MVX框架模式:MVC+MVP+MVVM 1.MVC:Mod ...

  5. vue、react、angular三大框架对比 && 与jQuery的对比

    前端当前最火的三大框架当属vue.react以及angular了. 但是在做项目的时候,我们怎么去选择呢?  这里做一个比较,希望大家可以有一个比较清晰的认识. vue与react vue和react ...

  6. vue,angular,react框架对比

    转载自:https://www.cnblogs.com/hubgit/p/6633214.html 首先,我们先了解什么是MVX框架模式? MVX框架模式:MVC+MVP+MVVM 1.MVC:Mod ...

  7. vue、react、angular三大框架对比

    前端的三大框架当属vue.react以及angular了,个人比较偏向react,它的社区比较繁荣,有很多丰富的组件 .angular的话感觉编译时间有点长,等待很恼火. vue与react vue和 ...

  8. vue和react全面对比(详解)

    vue和react对比(详解) 放两张图镇压小妖怪 本文先讲共同之处, 再分析区别 大纲在此: 共同点: a.都使用虚拟dom b.提供了响应式和组件化的视图组件 c.注意力集中保持在核心库,而将其他 ...

  9. vue与其他框架对比

    https://cn.vuejs.org/v2/guide/comparison.html 1. vue 框架的特点? MVVM框架模式 轻量级,灵活,容易上手 数据驱动 组件化(单文件组件) 插件化 ...

随机推荐

  1. CF1221F Choose a Square(二维偏序)

    由于y=x,我们可以将点对称过来,以便(x,y)(x<y) 考虑选取正方形(a,a,b,b),点集则为\((a\le x\le y\le b)\),相当于二维数点 将点按x降序,y升序排列,线段 ...

  2. required string parameter 'XXX'is not present 的几种情况

    required string parameter 'XXX'is not present 的几种情况 情况一:原因是由于头文件类型不对,可以在MediaType中选择合适的类型,例如GET和POST ...

  3. 2019SDN第7次上机作业

    2019SDN第7次上机作业 1.作业要求: 作业博客链接:https://edu.cnblogs.com/campus/fzu/fzusdn2019/homework/10165 2.具体操作步骤与 ...

  4. redis-sentinel 高可用方案实践

    近期公司的一块核心业务使用redis作为配置转发中心,存在单点问题,考虑服务的可靠性.针对业务需求,我们确定了我们的需求: 异地跨机房容灾 故障自动切换 尽可能高的保证数据不丢失 针对以上需求,我们分 ...

  5. sql查询最近7天数据(以年-月-日结果展示)

    sql代码如下: , 查询结果如下:

  6. locust参数化(数据库取值)

    locust参数化(数据库取值) 基于上一篇参数化的梳理,本篇用另一种方法从数据库中取出这100个用户来登录 思路:在 TaskSet 中的 on_start 方法表示执行任务前的操作,可以将数据库取 ...

  7. GIS地理处理脚本案例教程——批量栅格分割-批量栅格裁剪-批量栅格掩膜-深度学习样本批量提取

    GIS地理处理脚本案例教程--批量栅格分割-批量栅格裁剪-批量栅格掩膜-深度学习样本批量提取 商务合作,科技咨询,版权转让:向日葵,135-4855_4328,xiexiaokui#qq.com 关键 ...

  8. pm2 工具来管理 node 服务端

    如下: nodeServer.js 'use strict'; const http = require('http'); const server = http.createServer(funct ...

  9. servlet的session的生命周期

    谈到javaweb首先想到的就是servlet,说道servlet就会想到servlet的生命周期 说道servlet的生命周期 就绕不过servlet的三个方法init service destro ...

  10. pytorch visdom可视化工具学习—3-命令行操作使用经验

    在使用过程中一直以为要在哪个指定的environment下(即参数env)绘制内容,就必须在使用时声明 比如如果不声明,默认的就是在'main'环境下,端口为8097: viz = visdom.Vi ...