为什么要学习源码
- 可以提升自己学习更优秀的API设计和代码逻辑
- 面试的时候也会经常问源码相关的东西
- 更快的掌握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 用法 太贴心了