1.3　Vue与React

在MVVM框架一族中，Vue.js的表现十分优秀。在1.3节和1.4节中，我们将分别看到Vue和React，以及Vue和Angular的对比表现。

Vue和React都是轻量级框架，不过总体来看，Vue的性能是高于React的，笔者简单罗列了以下几点。

1.3.1　虚拟DOM

在处理用户界面时，DOM操作成本是最高的，Vue与React都在渲染流程中采用虚拟DOM以降低页面开销，如图1.11所示。不过，Vue的虚拟DOM实现的层级更高一些，这也意味着Vue比React更轻量、性能更高。

1.3.2　功能性组件

Vue和React都提供一些功能性组件以减少用户开销。笔者运行GitHub上的一个测试项目（https：//github.com/chrisvfritz/vue-render-performance-comparisons），该项目将渲染10 000个列表条目100次，得到的测试结果如表1.1所示。

React和Vue的速度都很快，不过显然Vue的渲染速度更快，这是因为React有大量用于提供警告和错误提示信息的检查机制。

1.3.3　轻量级—将与核心库无关的业务封装成独立库

React和Vue都将着重点放在核心库上，也都有专门负责路由和全局状态管理等功能的配套库。例如，与React配套的库有React Router、Redux，与Vue配套的库有Vue Router、Vuex。

1.3.4　视图模板

React采用JSX渲染组件，而Vue采用模板，如.vue扩展名的文件。

JSX是使用XML语法编写JavaScript的一种语法糖。语法如下：

class HelloMessage extends React.Component { render() {
         return (
            <div>
                  Hello {this.props.name}
            </div>
    );
  }}
ReactDOM.render(
  <HelloMessage name="Taylor" />,
  mountNode
);

通过JSX，我们可以只用JavaScript来构建视图组件。不过，对于从传统HTML+CSS+JS分离开发走向组件化开发的前端工程师来说，这种语法并不友好。

Vue提供了更简单的模板。语法如下：

<template>
<div class="demo-title">{{title}}</div>
</template>
<script>
  export default {
    data () {
       return {
         title: 'Hello World'
       }
    }
  }
</script>
<style scoped>
.demo-title {
    font-size: 24px;
    font-weight: 600;
}
</style>

Vue模板更贴合HTML，而不是用更高层的东西去封装它，学习曲线十分平缓。在Vue模板的style标签上标注scoped属性可划分作用域，使CSS样式表只作用于当前组件（具体实现机制将在后续章节中描述）。

由于Vue模板更贴近原生，因此，我们很容易混入其他一些东西，如HTML的预处理器（Pug/Jade等）、CSS的预处理器（LESS、SASS/SCSS等），以及更高版本（高级）的脚本语言（TypeScript、ES 6 JavaScript等）。Vue模板的语法也更符合传统开发习惯，并易于团队分析和代码维护。

1.3.5　其他

除框架本身外，Vue在其他方面也具有一些优势，如Vue的状态管理库vuex和路由库vue-router都由官方维护更新，从而保证了这些库与Vue本身的统一性。React的相关库则由社区进行维护，不过，这也使得React的社区生态更加繁荣一些。此外，Vue提供了项目快速构建工具—vue-cli脚手架，提供了包含npm依赖管理、webpack模块打包、vue-router前端路由、eslint语法检测、单元测试等集成功能，能够让开发者快速构建一个高质量的项目环境。