前端框架虚拟DOM的产生

大橙子-2025-02-20 10:09

直接说结论：为了找出与命令式(原生实现步骤)所执行代码的最小差异化，从而优化代码性能。

命令式：

可以理解为面向过程编程，需要写好每个实现步骤

javascript 复制代码

<div id="app"></div>
const div = document.querySelector('#app') // 获取 div
div.innerText = 'hello world' // 设置文本内容

如果需要修改文字内容为"你好"

javascript 复制代码

div.innerText = '你好' // 设置文本内容

声明式：

可以理解为面向结果编程，只需要关注结果，至于过程由框架实现。这里以vue3举例

javascript 复制代码

<div id="app"></div>
<script setup>
  const text = ref('hello world')
</script>

如果需要修改文字内容为"你好"。则需要vue3进行新旧对比，找出不同后执行innerText的更改

javascript 复制代码

text.value = '你好'

命令式和声明式两者性能差异:

命令式代码的更新性能消耗 = 1

声明式代码的更新性能消耗 = 1+X

其中X为找出新旧不同时两者(命令式和声明式)差异的性能消耗，虚拟DOM因此产生，它的作用就是为了辅助找出X，从而实现最接近原生的性能。

到后来虚拟DOM还出现了跨平台的优势。