Virtual DOM（虚拟dom-2）

最新推荐文章于 2024-03-31 00:56:09 发布

SeriousLose

最新推荐文章于 2024-03-31 00:56:09 发布

阅读量157

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Javascript Html DOM 文章标签： html5 javascript 前端 vue.js

本文链接：https://blog.csdn.net/SeriousLose/article/details/119656677

Javascript 同时被 3 个专栏收录

98 篇文章

订阅专栏

Html

17 篇文章

订阅专栏

DOM

16 篇文章

订阅专栏

本文探讨了虚拟DOM的出现背景，如何通过简化DOM操作和维护视图状态同步，以及它在MVVM框架中的作用。重点介绍了Virtual DOM的工作原理、优点，如高效更新、跨平台兼容和在Next.js、Weex等框架中的应用。Snabbdom作为Vue2.x的底层实现，以其轻量和扩展性闻名。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

为什么要使用虚拟DOM
	手动操作DOM比较麻烦，还需要考虑浏览器兼容性问题，有了jQuery等库简化DOM操作，随着项目的复杂DOM操作复杂提升。为了简化DOM的复杂操作出现了各种MVVM框架，MVVM框架解决了视图和状态的同步问题；为了简化视图操作，使用了模板引擎，但是模板引擎没解决跟踪状态变化的问题，于是Virtual DOM出现了。
	Virtual DOM 的好处是当状态改变时，不需要立即更新DOM，只需要创建一个虚拟树来描述DOM，Virtual DOM内部将弄清楚如何有效（diff）的更新DOM。 Virtual-DOM 虚拟DOM可以维护程序的状态，跟踪上一次的状态；通过比较前后两次的差异更新真实的DOM
作用
	维护视图和状态的关系；提高开发效率提升渲染性能性能（复杂视图情况下）跨浏览器兼容跨平台兼容 SSR Next.js/Nuxt.js 原生应用 Weex/RN 小程序mpvue/uni-app/taro
	snabbdom https://github.com/snabbdom/snabbdom Vue2.x内部使用的Virtual DOM就是改造的Snabbdom 大约200SLOC(single line of code) 通过模块可扩展源码使用TypeScript开发最快的Virtual DOM 之一
	virtual-dom 最早的虚拟dom库
	JQ示例 https://codesandbox.io/s/jq-demo-5i7qp snabbdom示例 https://codesandbox.io/s/snabbdom-demo-4hbyb 原生操作 https://codesandbox.io/s/divdemo-vox7f