私藏前端八股收集【Vue篇】

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，所以代码中不可以使⽤Com