专栏首页京程一灯为什么我们喜爱,使用和支持Vue.js

为什么我们喜爱,使用和支持Vue.js

让我告诉你一个关于Vue的故事,不仅仅是从Vue开发者的角度,我也会尝试着解释在Monterail中使用它的很多原因,你将会发现采用它对开发者和产品所有者来说都是一个很棒的决定。我将会告诉你我们如何拥抱Vue社区以及如何通过组织第一次国际Vue大会对其历史作出重大贡献。

首先,让我介绍一下自己。我是一个前端开发者,vue-newsletter的共同策划人,vue-multiselect的作者和vuelidate的合著者。包括商业用途,我已经使用vue.js快两年了。在过去的7个月里,我一直忙于组织VueConf,而这个会议明天就要召开了,简直太激动人心了!

我第一次接触Vue.js是在2015年年底,因为那时我正在寻找一个替代AngularJS和React的可行方案。那时AngularJS已经有些过时而我又不是React的粉丝,因为我一开始就没有学习JSX的打算。这时,Vue以其极其友好的文档引起了我的注意,然后在接下来的几个月里,我在几个内部项目里深入研究了Vue,看其是否适合Monterail的技术栈。惊喜的是它对我们来说简直是恰到好处!最后,我似乎是找到了框架中的圣杯——先进,灵活,简单又优雅的内部架构和API。

我完全着迷了。从我第一次听说Vue开始,它正变得越来越受欢迎(#2GitHub上最热门的JS框架)。虽然它起点不高,但已经被阿里巴巴,GitLab,Sainsbury,Codeship和百度等海内外或大或小的企业和业务实体所采用。我已经看了许多关于Vue的评论,文章和它与其它库和框架的比较,它们中说的最多的就是赞美Vue干净的语法,平滑的学习曲线和大体灵活的库——对此我十分同意。

对我而言,从我看到它的第一个代码片段起我就喜欢上了它。后来我把这种感觉传给了Monterail其他的JavaScript开发者。老实说,说服他们来到加入Vue的阵营并不难,考虑到相对于死板的AngularJS框架和过于冗沉灵活的React,Vue处于一个很好的位置,然后从这些库中选取最好的(有一点Knockout的魔法反应)。

将所有的东西全部打包进一个优雅的解决方案然后随着你的需求不断发展。我的意思是,Vue可以部署于非常广泛的用例,从简单的组件,加强传统的Rails应用,到全面的SPA(单页应用)或服务端渲染的同构应用。这正是我们作为软件公司面临的情况。

鉴于我们丰富的Angular经验,引入Vue是一件轻而易举的事。我的同事们可以在几小时、几天内学会它并开始写一些应用,对于那些知道它的人来说会觉得非常熟悉。React的粉丝也会十分高兴由于十分相似的架构模式(组件化)和整体感觉。所以的这些都不用牺牲开发者的经验。如果你是React的粉丝,那么你可能会相信有一些关于比较Vue与React的误解——我将在本文末尾尝试解决这个问题。

开发者对于Vue的看法

说到开发者的经验——Vue似乎是第一个让新手十分容易上手的框架。我曾看到过初级职位者在中型项目中几个小时就获得了成效。我相信这主要得益于单文件组件的好处,使得它更容易扩展和浏览应用程序的代码库。

能够快速并准确查看文件内容真的加快了开发速度。怎么可能? template, CSS, methods, props, computed values, data model, watchers, mapped Vuex actions, state 和 getters, lifecycle hooks——全都在一个.vue文件内。此外,由于Vue是依赖追踪系统(不像Angular基于watcher),并处理一些像优化组件渲染策略的苦活,你只需要专注于编写应用程序。

谈到生态环境。早在2015年的时候,它还比较小,但现在感觉完全相反。相信我,至今我参与策划vue-newsletter 近一年(49期),现在每周我们艰难的挑选出最相关的插件和组件,因为实在是太多了。

我非常肯定Vue现在的生态环境已经拥有了你构建各种应用所需的一切。但是最好的部分还是像vue-router和vuex(状态管理)这些由Vue的核心团队开发的最重要的库,这意味着对于Vue的高支持和兼容。但这还不是全部。

Vue是一个社区,而不是一个个人项目

我很高兴成为Vue Team Slack频道的成员(与其他几个活跃的社区成员)一段时间,作为其中的一员,帮我意识到Vue绝不是一个单人项目。社区成员正在努力进行一系列的发展、改进和调整。例如对改进测试经验,Nuxt.js——一个基于Vue的SSR框架或者最近an integration with NativeScript。更不用说Weex的猛烈发展,类似于React Native的Vue的原生跨平台开发方案。没错,你已经可以用Vue构建原生的手机应用,像阿里巴巴这样顶尖的中国科技公司已经在使用它了。

有些怀疑者可能会说Vue不是一个可行的选择,因为它缺乏像Google和Facebook这样的大型科技公司的支持,我认为这不是真正的问题。有许多非常流行和成功的项目例如webpack和Babel也是以类似的方式开始,但现在成为了现代web开发的核心。所有这些项目有什么共同点? 他们拥抱他们的社区,这正是Vue所做的。

在Monterail,我们与各种创业项目合作。 或许你知道,对于创业公司来说,时间和金钱很重要。我们需要在预算内快速交付,而这也是Vue非常有助于我们的——它和它的快速增长生态环境从一开始就为我们提供了生产所需的一切,然后随着应用程序需求的增长而顺利扩展。这并不意味着Vue仅适用于中小型项目,恰恰相反,它也适用于大型应用。不相信我?那你只要等待Evan的主题演讲。:)

Vue对我个人而言意味着什么

Vue给了我完美的机会去实现我一直的梦想——开始回馈社区。就在一年多以前,我和几个朋友一起发布了vue-multiselect,发表了第一期的vue-newsletter。几个月后,我们在当地的Meet.js活动中与Vue.js的作者Evan You主持了一个问答环节。我最近的社区相关项目叫做vuelidate,是和Paweł Grabarz合著的一个关于表单验证的库。从多个层面看,我决定的选择对于我们公司和Vue本身来说都是巨大的一步,简直太激动人心了!

VueConf

VueConf是第一个国际Vue.js大会,从本周开始。来自全球的17位演讲嘉宾和超过300位与会者来到Wrocław交流这个框架。我不得不承认,这几个月来一直很激动人心。你还记得第一次Angular大会吗? 第一次React大会?VueConf是一个巨大的里程碑,我高兴得不能再高兴了。更不用说我们又在Monterail中启动了几个基于Vue.js的项目!

福利部分:关于Vue的常见误解

就像我提到的,网上到处都是关于React和Vue的比较。不幸的是,其中一些包含了后来反复重复并且应该加以澄清的误解。如果你一直在考虑在您的项目中使用Vue还是React,以下几点对你可能会有帮助:

  • Vue也是“纯JavaScript”,就像React一样。模板编译为虚拟DOM渲染函数,就像React的JSX一样。模板还为您提供了一些简洁的语法糖,例如事件处理:@keyup.enter.prevent=“doStuff”,并包含许多优化例如静态树提升。在React中,您需要安装更多的Babel来转换实现。但是,如果你已经习惯这种方式,你也可以在Vue中使用JSX,甚至手写他的渲染函数。异步功能组件也同样适用。
  • 没有双向数据绑定。props总是单向绑定的并且你不能在子组件内部改变它。v-model只是通过单向传递值和监听事件(如input事件)的语法糖。
  • 没有脏值检测。如果你想了解响应式的原理,你可以看一下我的相关文章。提示:“MobX”和它工作原理相似,因为它能大大简化应用而受到React开发人的喜爱。Vue已经内置了它。
  • 你没被强迫改变本地状态。如果你想,你可以使用Reudx,但是Vuex是为Vue量身定做的!事实上它使用了一个Vue的实例。
  • Vue具有最好的异步组件/代码分割模式,以及顶尖的SSR。例如,Vue的SSR框架Nuxt.js在Lighthouse(一个Google的性能和PWA分析工具)中得分为100/100,完全没有对手。只需查看Addy Osmani在2017谷歌IO大会上最近的关于Progressive Web Apps的演讲。
  • Vue具有自己的脚手架工具vue-cli,其中包含许多有用的模板,如PWA,Nuxt.js这类拥有完整的webpack设置和多个社区模板。

结论

Vue灵活易学而且功能强大,它的生态环境仍在生长并且它已经拥有构建各种应用所需的一切(是的,也包括移动应用)。我敢肯定将来我们会听到更多关于Vue的声音。

随着社区快速壮大,我们可以肯定大量相关库的涌入,使其成为更多公司的技术选择。


往期精选文章

使用虚拟dom和JavaScript构建完全响应式的UI框架

扩展 Vue 组件

使用Three.js制作酷炫无比的无穷隧道特效

一个治愈JavaScript疲劳的学习计划

全栈工程师技能大全

WEB前端性能优化常见方法

一小时内搭建一个全栈Web应用框架

干货:CSS 专业技巧

四步实现React页面过渡动画效果

让你分分钟理解 JavaScript 闭包



小手一抖,资料全有。长按二维码关注京程一灯,阅读更多技术文章和业界动态。

本文分享自微信公众号 - 京程一灯(jingchengyideng)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2017-11-02

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 分布式阿波罗Apollo配置中心

    为什么要使用apollo,在我们开发分布式微服务项目的时候,那些配置一旦变更,就需要重启服务,这样非常不友好。因此我们考虑动态更改配置文件当中的配置,所以把那些...

    编程软文
  • 认识Set和Map数据结构

    tips : 由于 Set 结构没有键名,只有键值(或者说键名和键值是同一个值),所以keys方法和values方法的行为完全一致,而entries方法返回的...

    JianLiang
  • js通过input框输入属性和值,改变div的属性

    js实现在input框里面输入属性和值,页面的 div的属性根据输入的属性和值进行变化。

    祈澈菇凉
  • 快速入门Vue

    刚进公司做的第一个项目,刚好前端人手不足,需要我们后端同时兼顾前后端的工作,采用的iview UI框架,基于vue.js。

    KEN DO EVERTHING
  • 聊聊flink的Execution Plan Visualization

    本文主要研究一下flink的Execution Plan Visualization

    codecraft
  • mpvue网络接口请求封装

    在mpvue中我们同样使用小程序的原生API wx.request进行请求,具体方法如下:

    honey缘木鱼
  • editormd实现文章详情页面预览

    继之前博客写了editmd.js(国内开源的一款前端Markdown框架)实现的写文章功能之后,本博客介绍使用editormd实现文章预览功能

    用户1208223
  • 网络通信

    1.他是一个网络通信的工具,调用操作系统内核 创建的时候,可以选择tcp通讯,“三次握手,四次挥手”,也可以选择udp通信,一次通信

    DC童生
  • vue-cli3项目创建-配置-发布

    (2) 修改user module -- src/store/module/user.js

    RtyXmd
  • 2019开发者调查趋势与方向报告出炉

    近日国外开发者平台 HankerRank 发布了 2019 年开发者技能调查报告,该报告根据对71,281位开发者的调查得出。作者从中选取了一部分,给大家解读一...

    Rookie

扫码关注云+社区

领取腾讯云代金券