了解 React 或 Vue 中虚拟 DOM 的内部工作原理
P粉451614834
P粉451614834 2024-02-03 17:01:18
0
1
519

我是一名学生,我正在尝试为我的大学项目创建自己的虚拟 DOM(它不会有任何高级功能,如道具或事件,我会保持简单),就像其他著名的框架 React、Vue 等一样。

我只是想知道当我们有多个代码文件时(代码分割)。如果我对任何深层子元素进行更改,我是否需要比较完整的虚拟 DOM(包括所有子元素和父元素),或者我只需要比较该子元素。

如果我必须将完整的新虚拟 DOM(包括所有子级)与以前的虚拟 DOM 进行比较。那么为什么我应该关心在 React 或 Vue 中重新渲染(因为 child 的任何更改都会迫使框架比较完整的 Virtual DOM)

P粉451614834
P粉451614834

全部回复(1)
P粉420868294

对于 Vue, vue2 和 vue3 中虚拟 DOM 的工作方式有所不同。

vue3 的做法是,

  1. 通过解析组件文件中的 HTML 模板或渲染函数并将其转换为虚拟节点表示形式。
  2. 在进行解析时,它会记录与动态数据有依赖关系的节点。
  3. 如下所示
  1. 效果是定义解析某些数据值所需的计算的函数。
  2. 效果还包括虚拟节点的渲染功能
  3. 渲染函数巧妙地将虚拟节点转换为 DOM 元素
  4. 现在每当 data1 发生变化时,Vue3 都会重新执行相应的效果并触发后续数据变化的更新。

参考文献:

  1. Vue3 反应性
  2. Vnode 转换
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板