react vue 区别

1. 响应式原理不同

    vue: vue会遍历data数据对象, 使用Object.definedProperty 将每个属性都转换为getter和setter

    每个Vue组件实例都有一个对应的watcher实例, 在组件初次渲染的时候会记录组件用到了那些数据, 当数据发生改变的时候,

    会触发setter方法, 并通知所有依赖这个数据的watcher实例调用update方法去触发组件的compile渲染方法, 进行渲染数据

    react: React主要是通过setState, useState方法来更新状态, 状态更新之后, 组件也会重新渲染

     

  2. 监听数据变化的实现原理不同

    vue: Vue通过 getter/setter以及一些函数的劫持, 能精确知道数据变化

    react: React默认是通过比较引用的方式(diff)进行的

  3. Diff算法不同

    vue和react的diff算法都是进行同层次的比较, 主要有以下两点不同:

    vue对比节点, 如果节点元素类型相同, 但是className不同, 认为是不同类型的元素, 会进行删除重建, 但是react则会认为是

    同类型的节点, 只会修改节点属性

    vue的列表比对采用的是首尾指针法, 而react采用的是从左到右依次比对的方式, 当一个集合只是把最后一个节点移动到了第一个,

    react会把前面的节点依次移动, 而vue只会把最后一个节点移动到最后一个, 从这点上来说vue的对比方式更加高效