原文链接:10 things I love about Vue

原文作者:Duncan Grant

译者注:这篇文章写的比较浅显,只是作者从自身尝试使用Vue后的一些看法,所以不用期待这篇文章的深度,但也不失为刚开始使用Vue的用户提供多一些见解。


我喜欢Vue。当我第一次接触它的时候,也许我正经历着对JavaScript框架厌倦。我有使用Backbone、Angular、React的经验,在其他框架里我已经没有了尝试的热情。直到我在hacker news上看到的一条评论勾起了我的兴趣,他把Vue称作“新的JQuery”。那个时候,React是相对让我满意的,因为React有着在视图模板上严格的设计原则、虚拟DOM和状态响应的特点,不过Vue也兼具这些特点。在这篇文章里我想说说为什么Vue是我喜欢的框架,而不是其他我尝试过的。但愿你能同意我的看法,不过至少我希望在使用Vue开发现代JavaScript应用上给你提供一些看法。

极小的模板语法

Vue默认的模板语法是极小的、精炼的、可扩展的。就像Vue的很多方面,不使用标准模板语法是一件很简单的事,而且可以使用像JSX这种语法(官方文档中有说明该如何做),但说实话我不知道你为什么会想这么做。对于JSX的好处,也有一些说的对的,比如模糊了JavaScript和HTML的界限,可以很容易的把本来应该分散在几个地方写的代码混合着写在一起。

Vue反而使用了标准HTML来写模板,借助极小的模板语法可以做一些简单的事,比如创建重复的基于视图数据的元素。

<template>
  <div id="app">
    <ul>
      <li v-for='number in numbers' :key='number'>{{ number }}</li>
    </ul>
    <form @submit.prevent='addNumber'>
      <input type='text' v-model='newNumber'>
      <button type='submit'>Add another number</button>
    </form>
  </div>
</template>

<script>
export default {
  name: 'app',
  methods: {
    addNumber() {
      const num = +this.newNumber;
      if (typeof num === 'number' && !isNaN(num)) {
        this.numbers.push(num);
      }
    }
  },
  data() {
    return {
      newNumber: null,
      numbers: [1, 23, 52, 46]
    };
  }
}
</script>

<style lang="scss">
ul {
  padding: 0;
  li {
    list-style-type: none;
    color: blue;
  }
}
</style>

我也喜欢Vue提供的快速绑定,“:”用来绑定数据变量,“@”用来绑定事件。这个特点虽小但能很好的保持组件的简洁明了。

单文件组件

大部分人写Vue的时候都在使用“单文件组件”,它是一个后缀是.vue的文件,包含3个部分(css, html, javascript)。

这么做是对的,这样可以很容易的理解一个组件,它也鼓励你对于每个组件保持简短的代码。因为如果一个组件里的JavaScript,CSS和HTML篇幅很长的话,以后还得花时间去做模块化处理。

当在一个组件里使用<style>标签的时候,我可以给它增加“scoped”属性,这样定义的样式只对这个组件有效,换句话说,如果在这个组件里定义了一个.name的CSS选择器,它不会在其他组件里生效。相对于其他框架采用的CSS in JS的方式,我更喜欢这种在组件中写样式的方式。

单文件组件另一个好处是,这是有效HTML5文件。<template>, <script>, <style>都是W3C官方标准中有的,这意味着你在开发过程中使用的其他工具(比如linters),可以经过很小的调整就能使用。

Vue比作新的JQuery

这两个框架真的一点也不像,而且作用也不一样。让我来做一个我喜欢用的糟糕的类比来描述一下Vue和JQuery的关系:披头士乐队和齐柏林飞艇乐队。披头士乐队不用多说,他们是60年代最火的团体,有着极大的影响力。很难说70年代里最火的团体是谁,但齐柏林飞艇乐队有时候也算得上。你可以说披斗士乐队和齐柏林飞艇乐队在音乐上没什么关系,而且他们的音乐区别非常明显,但他们都受到了先前艺术的影响。也许2010年之后的JavaScript就像70年代的音乐世界,随着Vue被更多的电台播放,它会吸引更多的粉丝。

一些让JQuery成为伟大的哲学也在Vue中出现了:它有着简单的学习曲线,同时有着基于现代Web标准打造一个Web应用所有力量。基于这一点,Vue就是对JavaScript对象的一个封装。

便于扩展

像前面提到的,Vue默认使用标准的HTML、JS和CSS创建组件,但它也容易引入其他技术。如果你想用pug代替HTML、typescript代替JS、sass代替CSS,只需按照相应node模块和在单文件组件中添加相应属性就可以。你甚至可以在一个项目中混合使用这些,比如一些组件使用HTML,另外一些使用pug,即便我不确定这是最好的做法。

虚拟DOM

虚拟DOM很棒,并且已经被很多框架采用。它可以让状态变化的时候高效的更新DOM,并且最小化重新渲染和优化应用性能。最近谁都有虚拟DOM了,所以这也不是什么独特的,但它还是很酷。

Vuex很棒

对于大部分应用,状态管理是一个很难办的事,只靠视图层无法解决。Vue的解决办法是Vuex。很简单就可以设置好并和Vue集成好。熟悉Redux的人这个时候就像回家了,但我觉得相比React集成Redux,Vue集成Vuex更简洁。在JavaScript即将公布的新标准里,提供了对象展开运算符,它允许我们合并状态或函数,去操作从Vuex到组件的状态。

Vue CLI

Vue提供的CLI使得开始一个webpack结合Vue的项目很容易。一个命令就可以创建出支持单文件组件、babel、linting、测试和合理目录结构的项目。

我很怀念“vue build”命令。它让创建、运行组件还有测试看上去很容易。不幸的是,这个命令以后会从Vue中被去除,改为推荐使用poi。简单来讲,poi是webpack的封装,但我不觉得它像以下代码一样简便:

echo '<template><h1>Hello World!</h1></template>' > Hello.vue && vue build Hello.vue -o

重新渲染优化

在Vue中你不必手动的指出DOM的哪些部分需要重新渲染,我从来不是一个管理React组件的粉丝,比如为了阻止整个DOM树重新渲染使用“shouldComponentUpdate”。Vue在这方面很聪明。

容易获得帮助

Vue已经积累了使用它去打造各种应用的大量重要开发者。文档很好,如果需要更多帮助,也可以在很多平台上找到活跃用户:stackoverflow, discord, twitter等等,相比于有更少用户的其他框架,这会让你在打造应用时更自信。

不是单一企业维护

我觉得对于一个开源项目来说,不让单一的企业掌握更多发展方向的话语权是一件好事。像React授权那样的问题,Vue是没有的。

最后,我认为Vue是你做任何JavaScript项目都不错的选择。它的生态要比我在这篇文章里提到的大得多。对于全栈方面,你可以看看Nuxt.js。如果你想要一些可重用的组件,你可以看看Vuetify。Vue已经成为了2017年发展最快的框架之一,并且我预测在2018年它的发展不会减速。如果你还有30分钟的话,为什么不行动起来看看Vue能给你带来什么呢?

P.S.Vue和其他框架对比的文档:Comparison with Other Frameworks — Vue.js