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

 所属分类:web前端开发

 浏览:206次-  评论: 0次-  更新时间:2022-10-31
描述:更多教程资料进入php教程获得。 react与vue的虚拟dom没有区别;react和vue的虚拟dom都是用js对象来模拟真实DOM,用虚拟DOM的diff来最小化更...
更多教程资料进入php教程获得。

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

前端(vue)入门到精通课程:进入学习
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API调试工具:点击使用

本教程操作环境: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有什么区别的详细内容,更多请关注zzsucai.com其它相关文章!

 标签: Vue,React,
积分说明:注册即送10金币,每日签到可获得更多金币,成为VIP会员可免金币下载! 充值积分充值会员更多说明»

讨论这个素材(0)回答他人问题或分享使用心得奖励金币

〒_〒 居然一个评论都没有……

表情  文明上网,理性发言!