• 技术文章 >web前端 >前端问答

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

    长期闲置长期闲置2022-04-22 11:11:39原创356

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

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

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

    没有区别。

    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有什么区别的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:Vue React
    上一篇:react中modal的用法是什么 下一篇:jquery怎么在body中增加元素
    VIP课程(WEB全栈开发)

    相关文章推荐

    • 【腾讯云】年中优惠,「专享618元」优惠券!• react sketch是什么• react和vue的路由有什么区别• react里能嵌入jquery吗• react中受控组件是啥• react router怎么传参
    1/1

    PHP中文网