Vue 和 React 的区别
一、相同点
- 都将注意力集中在核心库,而将其他功能如路由和全局状态管理交给相关库。
- 都有自己的构建工具。
- 都有
props
的概念,允许组件间的数据传递 - 都鼓励组件化的应用,将应用拆分成一个个功能明确的模块,提高复用性
二、不同点
- 数据流
- Vue 默认支持数据的双向绑定
- React 提倡单向数据流
- 虚拟DOM
- Vue 在渲染过程中,会跟踪每一个组件的依赖关系,从而更快的计算出Virtual DOM 的差异,不需要重新渲染整个组件树
- React 当应用的状态被改变时,全部子组件都会重新渲染。当然,这可以通过
PureComponent/shouldComponentUpdate
这个生命周期来进行控制优化。
- 组件化
- Vue 中模板使用的数据必须在
this
上进行声明中转,所以import
的组件需要在components
中再次声明 - React 中的
render
函数支持闭包特性,import
的组件在render
函数中可以直接调用
- 模板编写
- Vue 鼓励写近似常规
HTML
的模板,接近标准的HTML
元素,只是多了一些属性 - React 推荐使用
JavaScript
的语法扩展模板JSX
语法
- 监听数据变化的实现原理不同
- Vue 通过
getter/setter
以及一些函数的劫持,能精确知道数据的变化 - React 通过比较引用的方式(diff)进行的
- HoC和mixins
- Vue 组合不同功能的方式是通过
mixin
实现 - React 组合不同功能的方式是通过HoC(高阶组件)实现
- 组件通信的区别
- Vue 三种方式实现组件间通信:父组件通过
props
向子组件传递数据;子组件通过事件向父组件发送消息;provide/inject
实现父组件向子组件注入数据,可跨越多个层级 - React 三种方式实现组件间通信:父组件通过
props
向子组件传递数据;子组件通过回调函数向父组件传递消息;context
实现跨层级通信
// provide/inject 是Vue提供的两个钩子,和data同级。书写形式和data一样
// provide: 用来发送数据或方法
// inject: 用来接收数据或方法
// 父组件中:
provide() {
return {
name: this.name
}
}
-------------------------------------------------------------
//子组件中:
inject: ['name']