前端框架虚拟DOM的产生

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

命令式：

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

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

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

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

声明式：

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

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

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

text.value = '你好'

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

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

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

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

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