返回
Vue3源码解析--虚拟DOM
前端
2023-11-22 16:10:02
来，浏览器就会重新计算、构建出对应的视图。
那么浏览器通过什么来构建出视图呢？简单来说就是解析器将HTML文本转换成DOM树。
上图就是一个DOM树节点，其中包含属性和节点。比如说我们要修改其中一个节点的颜色，那浏览器就会对比之前的DOM树和修改后的DOM树，通过对比找出修改的地方，比如说颜色修改了，然后浏览器就针对修改的节点进行重绘和重新渲染。
这样做其实有两个问题：
- 每次渲染页面，浏览器都需要耗费很大的性能开销，如果页面中某个节点修改了，浏览器就需要整棵树重新构建，这显然效率很低。
- 浏览器没有提供稳定的API给我们来改变DOM树，需要自己根据DOM的属性来判断需要修改的内容，难度很大。
虚拟DOM是一种用于应用状态的可编程的、轻量的界面树结构，它并不是真的存在于浏览器之中的。
那么虚拟DOM的作用是什么呢？
- 虚拟DOM用来生成真实DOM，而真实DOM用来构建视图。
- 虚拟DOM是用来减少浏览器构建视图所花费的性能开销，而虚拟DOM的结构是轻量的，有利于减少性能开销。
- 虚拟DOM有明确、固定的API，开发者可以直接修改虚拟DOM，框架会去比较修改前后的虚拟DOM，从而找到差异的地方，然后修改真实DOM。
虚拟DOM的结构
虚拟DOM的结构与真实DOM树非常相似，它也是由节点和属性组成的，但是虚拟DOM中的节点是轻量级的，它只包含节点的基本信息，如节点类型、标签名、属性和子节点。
虚拟DOM的创建过程
虚拟DOM的创建过程主要分为两个阶段：
- 编译阶段： 在这个阶段，框架会将模板编译成一个渲染函数，这个函数可以将数据转换成虚拟DOM。
- 挂载阶段： 在这个阶段，框架会将虚拟DOM挂载到真实的DOM树上，并将其渲染成视图。
虚拟DOM的更新过程
当数据发生变化时，框架会重新调用渲染函数生成一个新的虚拟DOM，然后通过比较新旧虚拟DOM之间的差异来更新真实DOM树。
虚拟DOM的优势
- 提高性能： 虚拟DOM可以减少浏览器构建视图所花费的性能开销，因为虚拟DOM的结构是轻量的，有利于减少性能开销。
- 简化开发： 虚拟DOM有明确、固定的API，开发者可以直接修改虚拟DOM，框架会去比较修改前后的虚拟DOM，从而找到差异的地方，然后修改真实DOM。
虚拟DOM在Vue3中的实现
Vue3中使用了一种叫做 snabbdom 的库来实现虚拟DOM。snabbdom是一个非常高效的虚拟DOM库，它可以快速地创建和更新虚拟DOM。
Vue3中使用虚拟DOM的主要流程如下：
- 当数据发生变化时，框架会重新调用渲染函数生成一个新的虚拟DOM。
- 框架会通过比较新旧虚拟DOM之间的差异来更新真实DOM树。
- 浏览器会根据更新后的真实DOM树重新构建视图。
总结
虚拟DOM是一种用于应用状态的可编程的、轻量的界面树结构，它并不是真的存在于浏览器之中的。虚拟DOM的作用是用来减少浏览器构建视图所花费的性能开销，以及简化开发。Vue3中使用虚拟DOM的主要流程是：当数据发生变化时，框架会重新调用渲染函数生成一个新的虚拟DOM；框架会通过比较新旧虚拟DOM之间的差异来更新真实DOM树；浏览器会根据更新后的真实DOM树重新构建视图。
