前端：每天5道面试题（vue）

1. Vue2 和 Vue3 有什么区别

对于vue2和vue3最大的区别 肯定是 组合式API（Composition API）和选项式API（Options API），相比于 Vue 2 的 Options API，Composition API 更灵活且易于维护

对ts的支持

生命周期不同

Vue 2 生命周期	Vue 3 生命周期	描述
beforeCreate()	setup()	组件开始创建数据实例之前
created()	setup()	组件数据创建数据实例完成
beforeMount()	onBeforeMount()	DOM挂载之前
mounted()	onMounted()	DOM挂载完成（页面完成渲染）
beforeUpdate()	onBeforeUpdate()	组件数据更新之前
updated()	onUpdated()	组件数据更新之后
beforeDestroy()	onBeforeUnmount()	组件销毁之前
destroyed()	onUnmounted()	组件销毁之后

性能上：

1. 优化响应式（proxy）
2. 优化打包体积（Tree shaking）
3. 优化diff

新的API、特性：

1. 多根节点（使用fragment默认包裹一层）
2. 异步组件（Suspense） 允许程序在等待异步组件加载完成前渲染兜底的内容
3. Teleport 组件可将部分 DOM 移动到 Vue app 之外的位置

2. 虚拟 dom 是什么，为什么要使用虚拟 dom

就是JavaScript 对象（包含 tag、props、children 三个属性）来描述真实 DOM 结构的一种技术

使用虚拟 DOM 的主要原因包括：

1. 性能优化：直接操作真实 DOM 可能会导致频繁的重排和重绘，影响性能。通过虚拟 DOM，可以将多次 DOM 操作合并为一次，并通过 diff 算法只更新必要的部分，从而减少对实际 DOM 的操作，提高性能。
2. 跨平台开发：虚拟 DOM 可以在不同平台上进行渲染，使得前端框架可以支持多种环境，如浏览器、移动端等。
3. 简化复杂度：通过虚拟 DOM，开发者可以更方便地管理页面状态和交互逻辑，减少直接操作 DOM 带来的复杂性。
4. 提高开发效率：虚拟 DOM 可以提供更高级的抽象，使得开发者更专注于业务逻辑的实现，而不用过多关注 DOM 操作的细节。

3. 你知道vue中key的原理吗？说说你对它的理解

key（vnode的唯一id） 的作用是帮助 Vue 区分不同节点的身份，在进行虚拟 DOM 的 diff 算法时能够更高效地识别节点的变化。key 在 Vue 的 diff 算法中扮演了重要的角色，可以帮助 Vue 更准确地判断新旧节点之间的关系，进而避免不必要的 DOM 操作，提高性能。

在 Vue 的源码中，主要涉及到 diff 算法的部分在 core/vdom/patch.js 文件中。在这个文件中，有一个名为 updateChildren 的函数，负责处理子节点的 diff 过程。在这个函数中，会根据子节点的 key 属性进行判断，以确定新旧节点之间的对应关系。

作用：

1. 唯一标识：帮助 Vue 区分不同的节点，避免节点混乱或状态丢失。
2. 提高渲染效率：通过 key，Vue 可以更精确地控制节点的更新，减少不必要的 DOM 操作，提高渲染效率。
3. 确保稳定性：保证列表渲染时节点的稳定性和正确性。

4. 你了解vue的diff算法吗？说说看

diff 算法是一种通过同层的树节点进行比较的高效算法

其有两个特点：

• 比较只会在同层级进行, 不会跨层级比较
• 在diff比较的过程中，循环从两边向中间比较

diff 算法主要用于比较新旧虚拟 DOM 树的变化，并且高效地更新实际 DOM。Vue 使用了双端比对算法（双指针算法）来进行 diff，通过遍历新旧节点的开始和结束位置来确定最小的更新量。

1. 首先，调用 patch 函数，开始比对新旧节点：

function patch(oldVnode, vnode, hydrating, removeOnly) {
  // 省略部分代码...
  
  // 调用 patchVnode 进行节点比对
  patchVnode(oldVnode, vnode, insertedVnodeQueue, null, null, removeOnly);
  
  // 省略部分代码...
}

2. 在 patchVnode 函数中实现具体的节点比对逻辑：

function patchVnode(oldVnode, vnode, insertedVnodeQueue, ownerArray, index, removeOnly) {
  // 如果新旧节点相同，则直接返回
  if (oldVnode === vnode) {
    return;
  }

  if (isDef(vnode.elm) || isDef(oldVnode.elm)) {
    // 省略部分代码...

    // 执行 updateChildren 函数进行子节点比对
    updateChildren(vnode.elm, vnode.children, insertedVnodeQueue);
  }
}

3. 在 updateChildren 函数中实现子节点的比对逻辑，使用双端比对算法：

function updateChildren(parentElm, oldCh, newCh) {
  let oldStartIdx = 0;
  let newStartIdx = 0;
  let oldEndIdx = oldCh.length - 1;
  let oldStartVnode = oldCh[oldStartIdx];
  let oldEndVnode = oldCh[oldEndIdx];
  let newEndIdx = newCh.length - 1;
  let newStartVnode = newCh[newStartIdx];
  let newEndVnode = newCh[newEndIdx];
  let oldKeyToIdx;

  // 创建旧节点的 key 到索引的映射
  for (let i = oldStartIdx; i <= oldEndIdx; i++) {
    const oldVnode = oldCh[i];
    if (oldVnode.key != null) {
      oldKeyToIdx[oldVnode.key] = i;
    }
  }

  // 循环比对新旧节点
  while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
    if (oldStartVnode == null) {
      oldStartVnode = oldCh[++oldStartIdx]; // 跳过已经处理过的 null 节点
    } else if (oldEndVnode == null) {
      oldEndVnode = oldCh[--oldEndIdx];
    } else if (newStartVnode.key === oldStartVnode.key) {
      // 如果新节点和旧节点有相同的 key，则进行更新操作
      patchVnode(oldStartVnode, newStartVnode);
      oldStartVnode = oldCh[++oldStartIdx];
      newStartVnode = newCh[++newStartIdx];
    } else {
      // 在旧节点中查找具有相同 key 的节点，并复用
      const idxInOld = oldKeyToIdx[newStartVnode.key];
      
      if (!idxInOld) {
        // 新节点在旧节点中无法找到对应 key，说明是新增节点
        createElm(newStartVnode);
      } else {
        // 复用旧节点
        const vnodeToMove = oldCh[idxInOld];
        patchVnode(vnodeToMove, newStartVnode);
        oldCh[idxInOld] = null; // 将已复用的旧节点位置置为 null
        parentElm.insertBefore(vnodeToMove.elm, oldStartVnode.elm);
      }
      newStartVnode = newCh[++newStartIdx];
    }
  }

  // 处理新增节点或删除节点
  if (newStartIdx <= newEndIdx) {
    addVnodes(parentElm, null, newCh, newStartIdx, newEndIdx);
  } else if (oldStartIdx <= oldEndIdx) {
    removeVnodes(oldCh, oldStartIdx, oldEndIdx);
  }
}

小结

• 当数据发生改变时，订阅者watcher就会调用patch给真实的DOM打补丁
• 通过isSameVnode进行判断，相同则调用patchVnode方法
• patchVnode做了以下操作：找到对应的真实dom，称为el如果都有都有文本节点且不相等，将el文本节点设置为Vnode的文本节点如果oldVnode有子节点而VNode没有，则删除el子节点如果oldVnode没有子节点而VNode有，则将VNode的子节点真实化后添加到el如果两者都有子节点，则执行updateChildren函数比较子节点
• updateChildren主要做了以下操作：设置新旧VNode的头尾指针新旧头尾指针进行比较，循环向中间靠拢，根据情况调用patchVnode进行patch重复流程、调用createElem创建一个新节点，从哈希表寻找 key一致的VNode 节点再分情况操作

5. 为什么vue data 是一个函数

简单的来说就是组件复用会导致数据污染

data也可以是一个对象 就是vue的根实例