1、虚拟dom和diff算法
虚拟dom（Virtual DOM）最先是由facebook团队提出的，最先运用在react中，之后在vue2.0版本中引入了虚拟DOM的概念。
原理：按照真实的dom树克隆一棵虚拟树，当我们通过js进行操作之后，比较虚拟树和真实树的差异，通过diff算法来计算出最小的变更，渲染器会将虚拟DOM转换为对应平台的真实DOM（根据vnode描述的信息如tag、props、children来创建DOM元素，根据规则为对应的元素添加属性和事件，处理vnode下的children）。
优点：
节约开销，提升性能。为跨平台开发提供了极大的便利，开发者写的同一套代码（有些需要针对不同平台做区分），通过不同的渲染规则，就可以生成不同平台的代码。
// diff 函数，对比两棵树function diff (oldTree, newTree) { var index = 0 // 当前节点的标志 var patches = {} // 用来记录每个节点差异的对象 dfsWalk(oldTree, newTree, index, patches) return patches}// 对两棵树进行深度优先遍历function dfsWalk (oldNode, newNode, index, patches) { // 对比oldNode和newNode的不同，记录下来 patches[index] = [...] diffChildren(oldNode.children, newNode.children, index, patches)}// 遍历子节点function diffChildren (oldChildren, newChildren, index, patches) { var leftNode = null var currentNodeIndex = index oldChildren.forEach(function (child, i) { var newChild = newChildren[i] currentNodeIndex = (leftNode && leftNode.count) // 计算节点的标识 ? currentNodeIndex + leftNode.count + 1 : currentNodeIndex + 1 dfsWalk(child, newChild, currentNodeIndex, patches) // 深度遍历子节点 leftNode = child })}diff痛点：
vue2中的虚拟dom是进行全量的对比，在运行时会对所有节点生成一个虚拟节点树，当页面数据发生变更后，会遍历判断virtual dom所有节点（包括一些不会变化的节点）有没有发生变化，不断地递归调用 patchVNode，不断堆叠而成的几毫秒，最终就会造成 VNode 更新缓慢。 Vue3动静结合 PatchFlag：这个模版编译时，编译器会在动态标签末尾加上 /* Text*/ PatchFlag，对于不参与更新的元素，做静态标记并提示在渲染时直接复用。3、Vite 和 Webpack
Vite：
基于原生ES模块，按需加载，unbundle 机制，冷启动和热更新速度更快。
快速冷启动：Vite只启动一台静态页面的服务器，不会打包全部项目文件代码，服务器根据客户端的请求加载不同的模块处理，实现按需加载。而webpack则是，一开始就将整个项目都打包一遍，再开启dev-server，如果项目规模庞大，打包时间必然很长。 打包编译速度：当需要打包到⽣产环境时，vite使⽤传统的rollup进⾏打包，所以，vite的优势是体现在开发阶段，另外，由于vite使⽤的是ES Module&#