Vue和React对比

Vue和React两个JavaScript框架都是当下比较受欢迎的，下面我们来一起探讨下它们的异同和技术选型。

1. 相同点

• 1.1 都使用了虚拟Dom

  Virtual DOM是一个映射真实DOM的JavaScript对象，如果需要改变任何元素的状态，那么是先在Virtual DOM上进行改变，而不是直接改变真实的DOM。当有变化产生时，一个新的Virtual DOM对象会被创建并计算新旧Virtual DOM之间的差别。之后这些差别会应用在真实的DOM上。
  

  在HTML中的标签 HTML中div
  在JavaScript中，虚拟Dom可以用对象简单地创造一个针对上面例子的映射 在JavaScript中的映射

  当新一项被加进去这个JavaScript对象时，一个函数会计算新旧Virtual DOM之间的差异并反应在真实的DOM上。

  计算差异的算法是高性能框架的秘密所在，React和Vue在实现上有点不同。

  Vue宣称可以更快地计算出Virtual DOM的差异，这是由于它在渲染过程中，会跟踪每一个组件的依赖关系，不需要重新渲染整个组件树。

  而对于React而言，每当应用的状态被改变时，全部子组件都会重新渲染。当然，这可以通过shouldComponentUpdate这个生命周期方法来进行控制，但Vue将此视为默认的优化。

• 1.2 组件化

  React与Vue都鼓励组件化应用。这本质上说，是建议你将你的应用分拆成一个个功能明确的模块，每个模块之间可以通过合适的方式互相联系。

  下面我们看一个简单组件的例子

//  Vue例子
<template>
 <div class="content">
   <img :src="item.icon" :alt="item.alt"/>
   <div>
     <p class="header">{{item.name || ''}}</p>
     <p>{{item.des || ''}}</p>
   </div>
 </div>
</template>
<script>
export default {
 name: "test-item",
 props: {
   "item": {
     type: Object,
     default: {}
   },
 }
}
</script>
<style scoped>
 .content {
   width: 100%;
   padding: 8px;
   display: flex;
   justify-content: flex-start;
   text-align: left;
 }
 .content img {
   height: 20px;
   width: 20px;
   margin: auto 8px auto 0;
 }
 .content .header {
   font-weight: bolder;
 }
</style>

//  React
import React from "react";

class TestItem extends React.Component {

    render() {
        const { item } = this.props;

        return (
              <div className="content">
                <img src={item.icon} alt={item.alt} />
                <div>
                  <p className="header">{item.name || ''}</p>
                  <p>{item.des || ''}</p>
                </div>
              </div>
        );
    }
}
export default TestItem;

• 1.3 Chrome 开发工具

  React和Vue都有很好的Chrome扩展工具去帮助你找出bug。它们会检查你的应用，让你看到Vue或者React中的变化。你也可以看到应用中的状态，并实时看到更新
  React的开发工具react-devtools
  Vue的开发工具vue-devtools

• 1.4 构建工具

  React和Vue都有自己的构建工具，你可以使用它快速搭建开发环境。React可以使用Create React App，而Vue对应的则是vue-cli。两个工具都能让你得到一个根据最佳实践设置的项目模板

• 1.5 配套框架

  Vue与React最后一个相似但略有不同之处是它们配套框架的处理方法。相同之处在于，两个框架都专注于UI层，其他的功能如路由、状态管理等都交由其他框架进行处理。

  而不同之处是在于它们如何关联它们各自的配套框架。Vue的核心团队维护着vue-router和vuex，它们都是作为官方推荐的存在。而React的react-router、dva和react-redux则是由社区成员维护。

2. 不同点

Vue与React有很多的相似之处，但他们也有完全不一致的地方。

• 2.1 JSX和模板

  React与Vue最大的不同就是一个使用JSX语法编写(React), 一个使用模板编写(Vue)
  Vue鼓励你去使用HTML模板去进行渲染, 因此，通过把原有的模板整合成新的Vue模板，Vue很容易提供旧的应用的升级。这也让新来者很容易适应它的语法。

  <test-item
       v-for="(item, index) in data" 
       :item="item" 
       :index="index"
       :key="index"
       :clickHandle="testItemClick(item)" />
  

  而React推荐JSX书写。同样的效果，用JSX书写的如下：

  data.map((item, index) => {
     const itemProps = {
         item, 
         index, 
         key: index, 
         clickHandle: this.testItemClick.bind(this)
      };
      return <TestItem {...itemProps}  />
  })
  

  看起来JSX有些比较麻烦, 但是使用起来比较灵活
  与React一样，Vue在技术上也支持render函数和JSX，但只是不是默认的而已。我们来看下Vue官方的一个例子

  import AnchoredHeading from './AnchoredHeading.vue'
  new Vue({
      el: '#demo',
      render: function (h) {
          return (
              <AnchoredHeading level={1}>
                  <span>Hello</span> world!
              </AnchoredHeading>
          )
        }
  })
  

• 2.2 状态管理(React)和对象属性(Vue)

  React通过状态(state)进行管理, 并且state对象在React应用中是不可变的在React中你需要使用setState()方法去更新状态

  testItemClick (item) {
      const data = [...this.state.data];
      item.count += 1;
      this.setState({ data })
  }
  

  而在Vue中, 数据由data属性在Vue对象中进行管理。

  testItemClick (item) {
      const items = [...this.items];
      item.count += 1;
      this.items = items;
  }
  

• 2.3 React Native 和 Weex

  React Native能在手机上创建原生应用，React在这方面处于领先位置。使用JavaScript, CSS和HTML创建原生移动应用, 并且有丰富的官方组件。Vue社区与阿里合作开发Vue版的React Native——Weex也很不错，但仍处于开发状态并且官方组件并不是太丰富。

3. 技术选型

对比完React和Vue的一些特点后, 我们来探讨下在项目中到底该选择那种框架

• 3.1 编码风格

  如果你喜欢使用JSX,React更加适合; 如果你喜欢使用模板,Vue更加适合;

• 3.2 性能测试

  下面是性能对比 运行速度 内存占用

  这些性能测试显示，Vue 比 React 占用的内存更少，运行速度更快

• 3.3 大型应用程序

用Vue和React实现的简单应用程序来比较两者，可能会让一个开发者从一开始就更倾向于Vue。这是因为基于模板的应用程序乍看上去更易理解，而且能很快地写好并跑起来。但是这些最初的便利会引入技术债并阻碍应用扩展到更大的规模。模板容易出现难以注意到的运行时错误，同时也不易于测试，重构和分解。
相比之下，Javascript模板可以组织成经过良好分解，且使用避免重复代码原则的代码组件，因而具有更强的可重用性和可测试性。Vue也有组件系统和渲染函数，但React的渲染系统可配置性更强，并包含如shallow rendering这样的特性，可结合React的测试工具一起使用，从而大为提高代码的可测试性及可维护性。

• 3.4 React更加适合原生应用

  React Native是一个用于通过Javascript构建移动端原生应用程序的库。 它与React.js相同，只是不使用Web组件，而是使用原生组件。

  // JS
  import React, { Component } from 'react'; 
  import { AppRegistry, Text, View } from 'react-native';
  class HelloWorld extends Component {   
    render() {     
      return (       
        <View>         
          <Text>Hello, React Native!</Text>
        </View>
      );   
    }
  }
  AppRegistry.registerComponent('HelloWorld', () => HelloWorld);
  我们只需要一套知识和工具就能开发Web应用和移动端原生应用。
  
  

阿里的Weex也是一个跨平台UI项目，目前它以Vue为灵感，使用了许多相同的语法。但是目前还不够成熟。

• 3.5 生态圈

  就目前来说, React比Vue要受欢迎许多 React Vue
  

  这两个框架都是开源的，但是React诞生于Facebook，它的开发者和Facebook都承诺会持续维护React。而Vue则是由独立开发者尤雨溪创造，目前也只有他一名全职维护者。虽然也有一些公司资助Vue，但是规模和Facebook没得比。但是在Github上Vue(122K)获得星数超过了React(117K)

最后, 到底是选择React和Vue, 个人感觉要看开发团队的技术栈, 如果喜欢使用jsx建议用React, 如果喜欢使用模板建议使用Vue; 如果做原生APP, 建议使用ReactNative