3.核心虚拟Dom和diff算法

1.虚拟DOM

虚拟DOM就是通过JS来生成一个AST节点树

我们可以用下面这段代码，写入浏览器的console

let div = document.createElement('div')
let str = ''
for (const key in div) {
  str += key + ''
}
console.log(str)

我们会发现，一个dom上面的属性是非常多的

所以直接操作dom是非常浪费性能的。
那么，如何解决呢？就是我们可以用JS的计算性能来换取操作DOM所消耗的性能。
虽然我们还是省不掉操作DOM，但是我们可以尽量少的操作它。
而操作JS是非常快的。

2.介绍Diff算法

<template>
  <div>
    <div :key="item" v-for="(item) in Arr">{{ item }}</div>
  </div>
</template>
 
 
 
<script setup lang="ts">
const Arr: Array<string> = ['A', 'B', 'C', 'D']
Arr.splice(2,0,'DDD')
</script>
 
 
<style>
</style>

有key和无key的时候是不一样的，详细看下图

无key的话，每次对比，如果不同的话，会直接覆盖。而不是复用这个元素，会浪费性能。
有key的话，会先对比首末的元素，再对比中间的元素，元素会复用。