Vue 与 React

Vue和React都是轻量级框架，不过从总体来看，Vue的性能是要高于React的。

1. 虚拟DOM

在处理用户界面时，DOM操作成本是最高的，两者都在渲染流程中采用虚拟DOM以降低页面开销。
原理如下图。

渲染流程

不过，Vue的虚拟DOM实现的层级要更高一些，这也意味着Vue比React更轻量，性能更高一些。

2. 功能性组件

两者都提供一些功能性组件以减少用户开销。
但是Vue的渲染速度要比React快一些，因为在React中有大量用于提示警告和错误提示信息的检查机制。

3. 轻量级-将与核心库无关的业务封装成独立库

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

4. 视图模板

React采用JSX渲染组件，而Vue则采用模板，比如.vue后缀的文件。

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

class HelloMessage extends React.Component {
  render() {
    return {
      <div>
        Hello {thiss.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样式表只作用于当前组件。

5. 其他

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