vue和react的相同和不同

109 阅读2分钟

vue和react的相同和不同

Vue是用于构建用户界面的渐进式框架,React是构建用户界面的组件化开发

相同点:

  1. .都支持服务器端渲染
  2. 都使用虚拟DOM来实现
  3. 都有Virtual DOM,组件化开发,通过props参数进行父子组件数据的传递,都实现webComponent规范
  4. 只有框架的骨架,其他的功能如路由、状态管理等是框架分离的组件。
  5. 都是JavaScript的UI框架,数据驱动视图,专注于创造前端的富应用
  6. 都有支持native的方案,React的React native,Vue的weex
  7. 都有管理状态,React有redux,Vue有自己的Vuex(自适应vue,量身定做)

不同点:

Vue是用于构建用户界面的渐进式框架,React是构建用户界面的组件化开发

  1. React严格上只针对MVC的view层,Vue则是MVVM模式

  2. virtual DOM不一样,vue会跟踪每一个组件的依赖关系,不需要重新渲染整个组件树.

  3. 而对于React而言,每当应用的状态被改变时,全部组件都会重新渲染,所以react中会需要shouldComponentUpdate这个生命周期函数方法来进行控制

  4. 组件写法不一样, React推荐的做法是 JSX + inline style, 也就是把HTML和CSS全都写进JavaScript了,即'all in js';

  5. Vue推荐的做法是webpack+vue-loader的单文件组件格式,即html,css,jd写在同一个文件;

  6. 数据绑定: vue实现了数据的双向绑定,react数据流动是单向的

  7. state对象在react应用中不可变的,需要使用setState方法更新状态;

  8. 在vue中,state对象不是必须的,数据由data属性在vue对象中管理

  9. vue是进行template渲染的,react是jsx

  10. 路由不一样,一个现有,一个封装路由表

  11. 生命周期不一样

  12. vue是class,react是classname

  13. 传值

  14. 在以下场景中,Vue比反应更好:

    最新文档和更简单的语法。更小,更快,更灵活。丰富的HTML模板,易于开发。

    React比Vue.js好:

    需要构建移动应用程序。专业和出色的社区支持,以解决任何问题。需要构建大型应用程序。轻量级,易于版本迁移

  15. 跳转路由不一样,vue是this.$router.push,react是this.props.history.push({})

    react跳转路由
    ​
    this.props.history.push({
      pathname:" /detail",
      query:{
           id:id
      }
    })
    this.props.location.query.id
    ​
    ​
    
    vue跳转路由
    ​
    quxiang(id) {
      this.$router.push({
        path: "/detail" ,
        query: {
             id: id
          }
      });
    }