前端利器vue，快速提升开发效率

vue浅谈

vue 综合了angualr和react的优点，是国人写的框架，易上手，轻量级，受到广泛的应用。

极小的模板语法

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的文件，包含3个部分（css,html,javascript).

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

当一个组件里使用style标签的时候，我可以给他添加”scope”属性，这样定义的样式只对这个组件有效，换句话说，如果这个组件里定义了一个.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了，所以这也不是什么独特的，但它还是很酷

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。