湖北省建设工程质量安全协会网站销售技巧和话术

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

命令式：

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

<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还出现了跨平台的优势。