1.4.2　Vue.js与React的比较

Vue.js和React两个JavaScript框架都是当下比较受欢迎的。两者之间的区别主要有哪些？各自的优缺点是什么呢？下面将针对这两个问题进行介绍。

1．Vue.js与React相比的优势

（1）使用虚拟DOM。

（2）提供了响应式和组件化的视图组件。

（3）关注核心库，有配套的路由和负责处理全局状态管理的库。

2．Vue.js与React的区别

1）在性能方面Vue.js与React的区别

（1）渲染性能。渲染用户界面的时候，DOM的操作成本是最高的。那为了尽可能地减少对DOM的操作，Vue.js和React都利用虚拟DOM来实现这一点，但Vue.js的虚拟DOM实现的权重要轻得多，因此比React的引入开销更少。Vue.js和React也提供功能性组件，这些组件由于都是没有声明、没有实例化的，因此会花费更少的开销。当这些都用于关键性能的场景时，Vue.js将会更快。

（2）开发中性能。在开发中，Vue.js每秒最高处理10帧，而React每秒最高处理不到1帧。这是由于React有大量的检查机制，这会让它提供许多有用的警报和错误提示信息。Vue.js在实现这些检查时，也更加密切地关注了性能方面。

（3）更新性能。在React中，当一个组件的状态发生变化时，它将会引起整个组件的子树都进行重新渲染，从这个组件的根部开始。为了避免子组件不必要的重新渲染，需要随时使用shouldComponentUpdate，并使用不可变的数据结构。在Vue.js中，组件的依赖关系在渲染期间被自动跟踪，因此系统能够准确地知道哪些组件实际上需要重新渲染。这就意味着在更新方面，Vue.js也是快于React的。

2）在HTML及CSS方面Vue.js与React的区别

在React中，HTML和CSS都是通过JavaScript编写的，所有组件的渲染都需要依靠JSX。JSX是使用XML语法编写JavaScript的一种语法。

JSX的渲染功能有以下优势。

（1）可以使用完整的编程语言JavaScript来实现视图界面。

（2）工具对JSX的支持相比于现有可用的其他Vue.js模板还是比较先进的（例如，代码校验（Linting）、类型检查、编辑器的自动完成等）。

在Vue.js中，有时需要用这些功能，当然也提供了渲染功能且支持JSX。然而，对于大多数组件来说，是不推荐使用渲染功能的。

Vue.js提供的是在HTML中编写模板，其优点如下。

（1）在编写模板的过程中，样式风格已定，并涉及更少的功能实现。

（2）模板总是会被声明的。

（3）模板中任何HTML语法都是有效的。

CSS的组件作用域：需要将组件分布在多个文件上（例如CSS Modules），否则在React中作用域内的CSS就会产生警报。非常简单的CSS还可以工作，但是稍微复杂点的（例如悬停状态、媒体查询、伪类选择符等）或者通过复杂的依赖来重做，或者直接不能使用。而Vue.js可以在每个单文件组件中完全访问CSS，代码如下。

上述代码中的可选scoped属性会自动添加一个唯一的属性（例如data-v-time）为组件内CSS所指定的作用域，在执行编译时.list-container:hover会被程序编译成类似.list-container[data-v-time]:hover的形式。

3）在扩展方面Vue.js与React的区别

（1）向上扩展。

①Vue.js的路由库和状态管理库都是由官方维护支持且与核心库同步更新的。React则是选择将路由库和状态管理库这些问题交给社区维护，因此创建了一个更分散的生态系统。但React的生态系统相比Vue.js更加多样化。

②Vue.js提供了Vue-cli脚手架，能让开发者非常容易地构建项目，包含了Webpack、Browserify，甚至No Build System。React在这方面提供了create-react-app，但可能还存在一些局限性。

·　不允许在项目生成时进行任何配置，而Vue.js支持Yeoman-like定制。

·　只提供一个构建单页面应用的单一模板，而Vue.js提供了各种用途的模板。

·　不能以用户自建的模板构建项目，而自建模板对企业环境下预先建立协议是特别有用的。

（2）向下扩展。

学习React需要了解JSX和ES 2015。而Vue.js使用相对比较简单，只需要引用以下语句就可以使用了，开发环境时将其替换成min版的即可。

    <script src="https://unpkg.com/vue/dist/vue.js"></script>