参考文档

一、与传统js区别

  1. 开发效率高：Vue提供了各种指令，React提供了JSX，大大提升了开发效率
  2. 性能优越：Vue和React中都避免了dom操作，采用了虚拟dom，大大提升应用应用的性能
  3. 组件化：Vue和React都提倡使用组件来编写页面，尽可能的拆分页面为多个不同的组件单元
  4. 数据驱动：基于数据驱动页面，做到了视图层和模型层的分离
  5. 状态管理：Vue提供了vuex，React提供了redux来管理应用的数据
  6. 前端路由：Vue和React都提供了前端路由，可以做到页面切换而不刷新网页


二、Vue和React的优缺点

Vue的优势包括：

  • 灵活、轻量、入门快
  • 双向数据绑定
  • vue全家桶
  • 更快的渲染速度和更小的体积

Vue缺点：

  • 生态环境差，不如angular和react
  • 社区不大

  • 原生App开发不够强大


    React的优势包括：

  • 单向数据流

  • 更适用于大型应用和更好的可测试性
  • 同时适用于Web端和原生App
  • 更大的生态圈带来的更多支持和工具

React缺点：

  • 对js要求高，入门要比Vue难
  • React只是MVC中的View，不是一个完整的框架。所以如果是大型项目想要一套完整的框架的话，基本都需要加上ReactRouter和Flux才能写大型应用。


三、Vue和React的不同

1.Vue和React采用的模式不一样

  • React严格上只针对MVC的view层，数据流向是单项的；Vue则是MVVM模式，需要创建ViewModel，实现了数据的双向绑定


    2.组件写法不一样

  • React推荐的做法是 JSX + inline style, 也就是把HTML和CSS全都写进JavaScript了,即’all in js’; Vue推荐的做法是webpack+vue-loader的单文件组件格式，即html、css、js写在同一个文件，在写html的时候使用的是vue的指令。


    3.路由和状态管理解决方案

  • React提供了一种称为Flux / Redux架构的创新解决方案，它代表单向数据流，是著名MVC架构的替代方案。Vue使用Vuex这个更高级架构，它集成到Vue中并提供无与伦比的体验。


    4.建筑工具

  • React和Vue都有一个非常好的开发环境。只需很少或没有配置，您就可以创建应用程序，使您能够使用最新的实践和模板。在React中，有一个Create React App（CRA），在Vue中，它是vue-cli。


    5.监听数据变化的原理不同

  • React组件中的state对象不可以直接修改，需要使用setState方法来更新状态，然后内部会触发forceUpdate方法更新页面(forceUpdate是否会执行会参照shouldComponentUpdate方法的返回值或者比较对象的引用地址是否一致)。Vue组件中的data可以直接修改，Vue是通过数据劫持(Object.defindProperty)+观察者模式来监听数据变化从而更新页面。


    6.重新渲染和优化

  • 当组件的状态发生变化时，React的机制会触发整个组件树的重新呈现。您可能需要使用额外的属性(shouldComponentUpdate)来避免不必要地重新渲染子组件。

  • 但Vue提供了优化的重新渲染，Vue会跟踪每一个组件的依赖关系,不需要重新渲染整个组件树。


    看法

  • 实际开发中，如果想要简单、快速、灵活的开发中小型SPA单页面应用程序，推荐使用Vue，因为它容易上手。而React适用于大规模应用程序和移动应用程序，它由Facebook团队提供支持，包含许多用例、解决方案、资源和项目。


3-1 vuex和redux的区别

从表面上来说，store 注入和使用方式有一些区别。
在 Vuex 中，$store 被直接注入到了组件实例中，因此可以比较灵活的使用：

  • 使用 dispatch 和 commit 提交更新
  • 通过 mapState 或者直接通过 this.$store 来读取数据

在 Redux 中，我们每一个组件都需要显示的用 connect 把需要的 props 和 dispatch 连接起来。
另外 Vuex 更加灵活一些，组件中既可以 dispatch action 也可以 commit updates，而 Redux 中只能进行 dispatch，并不能直接调用 reducer 进行修改。
从实现原理上来说，最大的区别是两点：

  • Redux 使用的是不可变数据，而Vuex的数据是可变的。Redux每次都是用新的state替换旧的state，而Vuex是直接修改
  • Redux 在检测数据变化的时候，是通过 diff 的方式比较差异的，而Vuex其实和Vue的原理一样，是通过 getter/setter来比较的（如果看Vuex源码会知道，其实他内部直接创建一个Vue实例用来跟踪数据变化）