Vue3_05（Vue核心虚拟Dom和 diff 算法）

为什么要学习源码

1. 可以提升自己学习更优秀的API设计和代码逻辑
2. 面试的时候也会经常问源码相关的东西
3. 更快的掌握vue和遇到问题可以定位

介绍虚拟DOM

虚拟DOM就是通过JS来生成一个AST节点树
Vue Template Explorer
为什么要有虚拟DOM？
我们可以通过下面的例子

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

发现一个dom上面的属性是非常多的
所以直接操作DOM非常浪费性能
解决方案就是 我们可以用JS的计算性能来换取操作DOM所消耗的性能，既然我们逃不掉操作DOM这道坎,但是我们可以尽可能少的操作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>

splice 用法 太贴心了

image.png