React和Vue的相似之处
-
UI框架
React和Vue都是JavaScript的UI框架,专注于创造前端的富应用。
-
虚拟DOM。
Vue宣称可以更快地计算出Virtual DOM的差异,这是由于它在渲染过程中,会跟踪每一个组件的依赖关系,不需要重新渲染整个组件树。 而对于React而言,每当应用的状态被改变时,全部子组件都会重新渲染。当然,这可以通过shouldComponentUpdate这个生命周期方法来进行控制,但Vue将此视为默认的优化。
-
组件化
React和Vue都鼓励组件化开发。
-
props
React和Vue都有props的概念。
-
构建工具和配套框架
都有属于自己的构建工具和配套框架
都是组件化开发 和 Virtual DOM 都支持props进行父子组件间数据通信 都支持数据驱动视图,不直接操作真实DOM,更新状态数据界面自动更新 都支持服务端渲染 都支持native的方案 数据流都是单向
React和Vue的主要区别
-
模板 vs JSX
-
状态管理 vs 对象属性
React中你需要使用setState()方法去更新状态。在Vue中,state对象并不是必须的,数据由data属性在Vue对象中进行管理。
-
单向数据流 vs 响应式
react整体是函数式的思想,把组件设计成纯组件,状态和逻辑通过参数传入,所以在react中,是单向数据流,推崇结合immutable来实现数据不可变。react在setState之后会重新走渲染的流程,如果shouldComponentUpdate返回的是true,就继续渲染,如果返回了false,就不会重新渲染,PureComponent就是重写了shouldComponentUpdate,然后在里面作了props和state的浅层对比。
而vue的思想是响应式的,也就是基于是数据可变的,通过对每一个属性建立Watcher来监听,当属性变化的时候,响应式的更新对应的虚拟dom。
总之,react的性能优化需要手动去做,而vue的性能优化是自动的,但是vue的响应式机制也有问题,就是当state特别多的时候,Watcher也会很多,会导致卡顿,所以大型应用(状态特别多的)一般用react,更加可控。
-
类式的写法 vs 声明式写法
-
HOC vs mixins
-
Vue组件分为全局注册和局部注册,在react中都是通过import相应组件,然后模版中引用
数据绑定:vue双向数据绑定,react单向数据绑定 写法不同:vue模板,react jsx语法
state对象在react中不可改变,需要使用setState方法,在vue中state对象不是必须的,数据由data属性在vue对象中管理。
Virtual DOM实现不同: vue会跟踪每一个逐渐的依赖关系,不需要重新渲染整个组件树 react每当用状态发生改变,全部组件都会重新渲染,所以react中需要shouldComponentUpdate这个生命周期函数来控制
React 严格上只针对 MVC 的 view 层,Vue则是 MVVM 模式