# vue和react的区别 ## 相同点 >1 都支持服务器端渲染 2 都有Virtual DOM（虚拟dom）,组件化开发,都有’props’的概念，这是properties的简写。props在组件中是一个特殊的属性，允许父组件往子组件传送数据,都实现webComponent规范 3 数据驱动视图 4 都有支持native的方案,React的React native,Vue的weex 5 构建工具 React和Vue都有自己的构建工具，你可以使用它快速搭建开发环境。React可以使用Create React App (CRA)，而Vue对应的则是vue-cli。两个工具都能让你得到一个根据最佳实践设置的项目模板。都有管理状态，React有redux,Vue有自己的Vuex（自适应vue，量身定做） ## 区别 ## 设计思想 react 1 函数式思想，all in js ,jsx语法，js操控css, JSX 允许在JavaScript中写html代码 2 单项数据流 3 setState重新渲染 4 每当应用的状态被改变时，全部子组件都会重新渲染。当然，这可以通过shouldComponentUpdate这个生命周期方法来进行控制，如果为true继续渲染、false不渲染，但Vue将此视为默认的优化。 vue 1 响应式思想，也就是基于数据可变的。把html、js、css、组合到一起，也可以通过标签引擎组合到一个页面中 2 双向绑定，每一个属性都需要建立watch监听（页面不用，涉及到组件更新的话需要） 3 Vue宣称可以更快地计算出Virtual DOM的差异，这是由于它在渲染过程中，会跟踪每一个组件的依赖关系，不需要重新渲染整个组件树 性能 react ----大型项目 优化需要手动去做，状态可控 vue ------中小型项目 状态改变需要watch监听，数据量太大的话会卡顿 扩展性 react 1 类式写法api少，更容易结合ts 2 可以通过高阶组件来扩展 vue 1 声明式写法，结合ts比较复杂 2 需要通过mixin方式来扩展 React刚开始也有mixin的写法，通过React.createClass的api，不过现在很少用了。 Vue也不是不能实现高阶组件，只是特别麻烦，因为Vue对与组件的option做了各种处理，想实现高阶组件就要知道每一个option是怎么处理的，然后正确的设置。具体有多复杂，可以参考下面的文章。  在Vue组件中，有几个观念和React相差比较大，我觉得主要有以下这几点： * Vue组件分为全局注册和局部注册，在react中都是通过import相应组件，然后模版中引用； * props是可以动态变化的，子组件也实时更新，在react中官方建议props要像纯函数那样，输入输出一致对应，而且不太建议通过props来更改视图； * 子组件一般要显示地调用props选项来声明它期待获得的数据。而在react中不必需，另两者都有props校验机制； * 每个Vue实例都实现了事件接口，方便父子组件通信，小型项目中不需要引入状态管理机制，而react必需自己实现； * 使用插槽分发内容，使得可以混合父组件的内容与子组件自己的模板； * 多了指令系统，让模版可以实现更丰富的功能，而React只能使用JSX语法； * Vue增加的语法糖computed和watch，而在React中需要自己写一套逻辑来实现； * react的思路是all in js，通过js来生成html，所以设计了jsx，还有通过js来操作css，社区的styled-component、jss等；而 vue是把html，css，js组合到一起，用各自的处理方式，vue有单文件组件，可以把html、css、js写到一个文件中，html提供了模板引擎来处理。 * react做的事情很少，很多都交给社区去做，vue很多东西都是内置的，写起来确实方便一些， 比如 redux的combineReducer就对应vuex的modules， 比如reselect就对应vuex的getter和vue组件的computed， vuex的mutation是直接改变的原始数据，而redux的reducer是返回一个全新的state，所以redux结合immutable来优化性能，vue不需要。 * react是整体的思路的就是函数式，所以推崇纯组件，数据不可变，单向数据流，当然需要双向的地方也可以做到，比如结合redux-form，组件的横向拆分一般是通过高阶组件。而vue是数据可变的，双向绑定，声明式的写法，vue组件的横向拆分很多情况下用mixin。