React和Vue对比

作者: a333661d6d6e | 来源:发表于2018-10-22 20:26 被阅读47次

相同点

  • 都支持服务器端渲染
  • 都有Virtual DOM,组件化开发,通过props参数进行父子组件数据的传递,都实现webComponent规范
  • 数据驱动视图
  • 都有支持native的方案,React的React native,Vue的weex

不同点

  • React严格上只针对MVC的view层,Vue则是MVVM模式
  • virtual DOM不一样,vue会跟踪每一个组件的依赖关系,不需要重新渲染整个组件树.而对于React而言,每当应用的状态被改变时,全部组件都会重新渲染,所以react中会需要shouldComponentUpdate这个生命周期函数方法来进行控制
  • 组件写法不一样, React推荐的做法是 JSX + inline style, 也就是把HTML和CSS全都写进JavaScript了,即'all in js'; Vue推荐的做法是webpack+vue-loader的单文件组件格式,即html,css,jd写在同一个文件;
  • state对象在react应用中不可变的,需要使用setState方法更新状态;在vue中,state对象不是必须的,数据由data属性在vue对象中管理
React和Vue对比
介绍一个全栈开发交流学习圈,欢迎加入Q群:864305860
关于vue的数据双向绑定和单向数据流

Vue 的依赖追踪是【原理上不支持双向绑定,v-model 只是通过监听 DOM 事件实现的语法糖】

vue的依赖追踪是通过 Object.defineProperty 把data对象的属性全部转为 getter/setter来实现的;当改变数据的某个属性值时,会触发set函数,获取该属性值的时候会触发get函数,通过这个特性来实现改变数据时改变视图;也就是说只有当数据改变时才会触发视图的改变,反过来在操作视图时,只能通过DOM事件来改变数据,再由此来改变视图,以此来实现双向绑定

双向绑定是在同一个组件内,将数据和视图绑定起来,和父子组件之间的通信并无什么关联;

组件之间的通信采用单向数据流是为了组件间更好的解耦,在开发中可能有多个子组件依赖于父组件的某个数据,假如子组件可以修改父组件数据的话,一个子组件变化会引发所有依赖这个数据的子组件发生变化,所以vue不推荐子组件修改父组件的数据,直接修改props会抛出警告

react没有数据双向绑定

react是单向数据流

react中通过将state(Model层)与View层数据进行双向绑定达数据的实时更新变化,具体来说就是在View层直接写JS代码Model层中的数据拿过来渲染,一旦像表单操作、触发事件、ajax请求等触发数据变化,则进行双同步。
介绍一个全栈开发交流学习圈,欢迎加入Q群:864305860

相关文章

  • Vue和React

    我们来对比一下Vue,React,Angular Vue和React对比 Vue和React相同点 基于MVC模式...

  • vue对比react、Angular(转官方文档)

    vue对比react、Angular(转官方文档) React React 和 Vue 有许多相似之处,它们都有:...

  • Vue与React的区别

    Vue与React两个框架的区别和优势对比

  • VUE V.S. React 生命周期对比

    参考文章:vue生命周期和react生命周期对比

  • React/Vue 项目时为什么要在组件中写 key,其作用是什

    React/Vue 项目时为什么要在组件中写 key,其作用是什么? vue和react都是采用diff算法来对比...

  • vue和react 区别:

    vue和react 区别: 1、vue与react的对比,如何选型?从性能,生态圈,数据量,数据的传递上,作比较 ...

  • react和vue对比

    个人认为,react和vue的业务逻辑是差不多,vue在react上封装了更简洁的方法,使用起来更加的便捷,如:提...

  • React和Vue对比

    相同点 都支持服务器端渲染 都有Virtual DOM,组件化开发,通过props参数进行父子组件数据的传递,都实...

  • Vue和React对比

    Vue也已经升级到2.0版本了,到现在为止(2016/11/19)比较流行的MVVM框架有AngularJS(也有...

  • React和Vue对比

    首次发表在个人博客 相同点 都支持服务器端渲染 都有Virtual DOM,组件化开发,通过props参数进行父子...

网友评论

本文标题:React和Vue对比

本文链接:https://www.haomeiwen.com/subject/fycnzftx.html