前端两大框架 vue 和 react 的区别

Posted 2021-03-10 lyxzxp

1. 设计思想

　　vue： vue的官网介绍说vue是一种渐进式框架，采用自底向上增量开发的设计；

　　react： 采用函数式编程，推崇纯组件，数据不可变，单向数据流；

2. 编写语法

　　vue： 采用单文件组件格式，保留了html，css，js分离的写法；

　　react： 通过jsx渲染模板，html，css全部写入js中；

3. 构建工具

　　vue： 提供cli脚手架，可以非常容易的创建项目并进行配置；

　　react： 使用creat-react-app，有局限行，不能完成某些配置；

4. 状态管理

　　 vuex ： $store 被直接注入到了组件实例中，因此可以比较灵活的使用，组件既可以dispatch action又可以commit updates。

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

 　　redux ： 我们每一个组件都需要显示的用 connect 把需要的 props 和 dispatch 连接起来，redux 中只能进行 dispatch，并不能直接调用 reducer 进行修改。

　　两者之间的差异

• • Redux 使用的是不可变数据，而Vuex的数据是可变的。Redux每次都是用新的state替换旧的state，而Vuex是直接修改

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

 

React更偏向于构建稳定大型的应用，非常的科班化。

Vue更偏向于简单迅速的解决问题，更灵活，不那么严格遵循条条框框。

因此也会给人一种大型项目用React，小型项目用 Vue 的感觉。