react与vue的虚拟dom有什么区别

react与vue的虚拟dom没有区别；react和vue的虚拟dom都是用js对象来模拟真实DOM，用虚拟DOM的diff来最小化更新真实DOM，可以减小不必要的性能损耗，按颗粒度分为不同的类型比较同层级dom节点，进行增、删、移的 *** 作。

本教程 *** 作环境：Windows10系统、react17.0.1版、Dell G3电脑。

没有区别。

react和vue的虚拟dom都是一样的， 都是用JS对象来模拟真实DOM，然后用虚拟DOM的diff来最小化更新真实DOM。

除了极个别实现外，两者前半部分（用JS对象来模拟真实DOM）几乎是一样的。

而对于后半部分（用虚拟DOM的diff来最小化更新真实DOM）两者算法也是类似的，包括replace delete insert等

vue和react都采用了虚拟dom算法，以最小化更新真实DOM，从而减小不必要的性能损耗。

按颗粒度分为tree diff, component diff, element diff. tree diff 比较同层级dom节点，进行增、删、移 *** 作。如果遇到component， 就会重新tree diff流程。

虽然两者对于dom的更新策略不太一样， react采用自顶向下的全量diff，vue是局部订阅的模式。 但是这其实和虚拟dom并无关系

dom的更新策略不同

react 会自顶向下全diff.

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

1、在react中，当状态发生改变时，组件树就会自顶向下的全diff, 重新render页面， 重新生成新的虚拟dom tree, 新旧dom tree进行比较， 进行patch打补丁方式，局部跟新dom. 所以react为了避免父组件跟新而引起不必要的子组件更新， 可以在shouldComponentUpdate做逻辑判断，减少没必要的render， 以及重新生成虚拟dom，做差量对比过程.

2、在 vue中， 通过Object.defineProperty 把这些 data 属性 全部转为 getter/setter。同时watcher实例对象会在组件渲染时，将属性记录为dep, 当dep 项中的 setter被调用时，通知watch重新计算，使得关联组件更新。

Diff 算法借助元素的 Key 判断元素是新增、删除、修改，从而减少不必要的元素重渲染。

推荐学习：《react视频教程》

以上就是react与vue的虚拟dom有什么区别的详细内容，