Vue.js从入门到项目实战
上QQ阅读APP看书，第一时间看更新
上一章目录下一章

1.3 Vue与React

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

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

1.3.1 虚拟DOM

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

图1.11 渲染流程

1.3.2 功能性组件

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

表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、ES6 Javascript等）。Vue模板的语法也更符合传统开发习惯，并易于团队分析和代码维护。

1.3.5 其他

除框架本身外，Vue在其他方面也占据了一些优势，比如Vue的状态管理库vuex和路由库vue-router都是由官方维护更新，从而保证了这些库与Vue本身的统一性。而React的相关库则由社区进行维护，不过，这也使得React的社区生态更加繁荣一些。

此外，Vue提供了项目快速构建工具——vue-cli脚手架，提供了包含npm依赖管理、webpack模块打包、vue-router前端路由、eslint语法检测、单元测试等集成功能，能够让开发者快速构建一个高质量的项目环境。

上一章目录下一章