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']
