Vue让我喜欢的10个方面

原文作者：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