深入了解vue核心虚拟 Dom 和 diff 算法

虚拟 DOM

虚拟DOM就是通过 js 来生成一个 AST 节点数

为什么要有虚拟DOM？

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

打印出来发现一个 dom 上面的属性是非常多的，所以直接操作 DOM 非常浪费性能，解决方案就是我们可以利用 JS 的计算性能来换取操作 DOM 所消耗的性能，操作 js 是非常快的

介绍 Diff 算法

Vue3 源码地址 https://github.com/vuejs/core

<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>

结合此图深入理解 diff 算法