盒子
盒子
文章目录
  1. 使用
  2. 框架类型不同
  3. 数据流
  4. 语法

vue和react比较

使用

vue使用单文件,容易上手,react使用jsx,在js中编写html,代码量多,自主空间大

框架类型不同

vue是mvvm框架,react不是,因此vue有双向绑定,react并没有。展开说一下,所谓的双向绑定,就是view和model之间的绑定,3大框架都帮我们做了model到view的工作,方式差异也比较大。但是view到model其实实现原理很简单,一般是通过监听事件实现的,这一点上vue和react不一样,vue可以通过v-model帮我们实现,而react需要开发者自己实现,所以代码可能比较多,但是发挥更加自由,比如说一下校验。 再说说这两大框架view到model的实现,这个才是重点,也是各框架最大差异所在。先说说react,view到model,我们通过setState方法将新的state合并到组件的state对象,接着react调用render方法构建新的virtual dom,接着通过复杂度为O(n)的diff算法进行新旧v dom的对比,将差异映射到真实dom。其中注意一点,要比较两个树,传统的算法复杂度是O(n^3),react之所以能降到O(n)级别,是默认比较同级节点,如果出现跨级操作,会影响性能。但是同级节点的比较也会存在问题,最典型的就是list数据结构了,因此react要求我们为每个item加一个唯一的key,可参考文章。而vue呢,是怎么实现从model到view的绑定的。这要通过数据劫持(Object.defineProperty)和发布订阅模式。具体来说就是,当初始化一个Vue对象时,vue会劫持data对象的所有属性,使其变成访问属性,接着之后如果我们改变data中的属性,会调用对应的set方法,这是一个发布点,将通知所有的订阅者(我的理解是包括template中的组件属性和文本节点),接着渲染变更的dom解构,从而达到model到view的绑定。那么,监听者列表是怎么存进去的呢,vue是在何时push到列表里面的呢?没错,是在访问属性的get方法做手脚,当你使用v-data,vue就会调用对应的get方法,将其加到订阅列表里面,那么就能监听到set方法发布的事件了,从而vue也知道更新那些内容,叨叨model到view的绑定。

数据流

都是单向数据流。为什么要这样设计呢?因为如果是双向的话,那数据流向就变得那一预测和管理。所谓的单向数据流是指:父组件–>子组件。vue和react都是通过props实现从父组件到子组件的数据传递。在子组件到父组件上,react也是通过传递父组件自身方法作为prop给子组件,子组件调用该方法并且将数据当做参数进行传递,从而实现子–>父的数据流向,那么兄弟节点的数据传递呢?这里就不做展开了,可以看看官网的状态提升。再说说vue子–>父的数据传递,是通过发布订阅的方式,并非通过prop传递,类似在子组件中用emit,父组件中用on。vue中还可以通过event bus实现各个层级之间的事件传递(其原理也是发布订阅)。当然,react也可以用发布订阅实现数据的逆向流动,参考之前的文章和他人的文章。当然,如果是共享的数据,建议用状态管理库(vuex、redux)

语法

react建议用es6语法,vue一般用es5

支持一下
扫一扫,支持 Alin
  • 微信扫一扫
  • 支付宝扫一扫