腾讯前端常考vue面试题整理

什么是 mixin ？

• Mixin 使我们能够为 Vue 组件编写可插拔和可重用的功能。
• 如果希望在多个组件之间重用一组组件选项，例如生命周期 hook、 方法等，则可以将其编写为 mixin，并在组件中简单的引用它。
• 然后将 mixin 的内容合并到组件中。如果你要在 mixin 中定义生命周期 hook，那么它在执行时将优化于组件自已的 hook。

Vue中diff算法原理

DOM操作是非常昂贵的，因此我们需要尽量地减少DOM操作。这就需要找出本次DOM必须更新的节点来更新，其他的不更新，这个找出的过程，就需要应用diff算法

vue的diff算法是平级比较，不考虑跨级比较的情况。内部采用深度递归的方式+双指针(头尾都加指针)的方式进行比较。

简单来说，Diff算法有以下过程

• 同级比较，再比较子节点（根据key和tag标签名判断）
• 先判断一方有子节点和一方没有子节点的情况(如果新的children没有子节点，将旧的子节点移除)
• 比较都有子节点的情况(核心diff)
• 递归比较子节点
• 正常Diff两个树的时间复杂度是O(n^3)，但实际情况下我们很少会进行跨层级的移动DOM，所以Vue将Diff进行了优化，从O(n^3) -> O(n)，只有当新旧children都为多个子节点时才需要用核心的Diff算法进行同层级比较。
• Vue2的核心Diff算法采用了双端比较的算法，同时从新旧children的两端开始进行比较，借助key值找到可复用的节点，再进行相关操作。相比React的Diff算法，同样情况下可以减少移动节点次数，减少不必要的性能损耗，更加的优雅
• 在创建VNode时就确定其类型，以及在mount/patch的过程中采用位运算来判断一个VNode的类型，在这个基础之上再配合核心的Diff算法，使得性能上较Vue2.x有了提升

vue3中采用最长递增子序列来实现diff优化

回答范例

思路

• diff算法是干什么的
• 它的必要性
• 它何时执行
• 具体执行方式
• 拔高：说一下vue3中的优化

回答范例

1. Vue中的diff算法称为patching算法，它由Snabbdom修改而来，虚拟DOM要想转化为真实DOM就需要通过patch方法转换
2. 最初Vue1.x视图中每个依赖均有更新函数对应，可以做到精准更新，因此并不需要虚拟DOM和patching算法支持，但是这样粒度过细导致Vue1.x无法承载较大应用；Vue 2.x中为了降低Watcher粒度，每个组件只有一个Watcher与之对应，此时就需要引入patching算法才能精确找到发生变化的地方并高效更新
3. vue中diff执行的时刻是组件内响应式数据变更触发实例执行其更新函数时，更新函数会再次执行render函数获得最新的虚拟DOM，然后执行patch函数，并传入新旧两次虚拟DOM，通过比对两者找到变化的地方，最后将其转化为对应的DOM操作
4. patch过程是一个递归过程，遵循深度优先、同层比较的策略；以vue3的patch为例

• 首先判断两个节点是否为相同同类节点，不同则删除重新创建
• 如果双方都是文本则更新文本内容
• 如果双方都是元素节点则递归更新子元素，同时更新元素属性
• 更新子节点时又分了几种情况
  • 新的子节点是文本，老的子节点是数组则清空，并设置文本；
  • 新的子节点是文本，老的子节点是文本则直接更新文本；
  • 新的子节点是数组，老的子节点是文本则清空文本，并创建新子节点数组中的子元素；
  • 新的子节点是数组，老的子节点也是数组，那么比较两组子节点，更新细节blabla
• vue3中引入的更新策略：静态节点标记等

vdom中diff算法的简易实现

以下代码只是帮助大家理解diff算法的原理和流程

1. 将vdom转化为真实dom：

const createElement = (vnode) => {
   
  let tag = vnode.tag;
  let attrs = vnode.attrs || {
   };
  let children = vnode.children || [];
  if(!tag) {
   
    return null;
  }
  //创建元素
  let elem = document.createElement(tag);
  //属性
  let attrName;
  for (attrName in attrs) {
   
    if(attrs.hasOwnProperty(attrName)) {
   
      elem.setAttribute(attrName, attrs[attrName]);
    }
  }
  //子元素
  children.forEach(childVnode => {
   
    //给elem添加子元素
    elem.appendChild(createElement(childVnode));
  })

  //返回真实的dom元素
  return elem;
}

2. 用简易diff算法做更新操作

function updateChildren(vnode, newVnode) {
   
  let children = vnode.children || [];
  let newChildren = newVnode.children || [];

  children.forEach((childVnode, index) => {
   
    let newChildVNode = newChildren[index];
    if(childVnode.tag === newChildVNode.tag) {
   
      //深层次对比, 递归过程
      updateChildren(childVnode, newChildVNode);
    } else {
   
      //替换
      replaceNode(childVnode, newChildVNode);
    }
  })
}

Vue 子组件和父组件执行顺序

加载渲染过程：

1. 父组件 beforeCreate
2. 父组件 created
3. 父组件 beforeMount
4. 子组件 beforeCreate
5. 子组件 created
6. 子组件 beforeMount
7. 子组件 mounted
8. 父组件 mounted

更新过程：

1. 父组件 beforeUpdate
2. 子组件 beforeUpdate
3. 子组件 updated
4. 父组件 updated

销毁过程：

1. 父组件 beforeDestroy
2. 子组件 beforeDestroy
3. 子组件 destroyed
4. 父组件 destoryed

v-if、v-show、v-html 的原理

• v-if会调用addIfCondition方法，生成vnode的时候会忽略对应节点，render的时候就不会渲染；
• v-show会生成vnode，render的时候也会渲染成真实节点，只是在render过程中会在节点的属性中修改show属性值，也就是常说的display；
• v-html会先移除节点下的所有节点，调用html方法，通过addProp添加innerHTML属性，归根结底还是设置innerHTML为v-html的值。

Vue 的父子组件生命周期钩子函数执行顺序

• 渲染顺序 ：先父后子，完成顺序：先子后父
• 更新顺序 ：父更新导致子更新，子更新完成后父
• 销毁顺序 ：先父后子，完成顺序：先子后父

加载渲染过程

父 beforeCreate->父 created->父 beforeMount->子 beforeCreate->子 created->子 beforeMount->子 mounted->父 mounted。子组件先挂载，然后到父组件

子组件更新过程

父 beforeUpdate->子 beforeUpdate->子 updated->父 updated

父组件更新过程

父 beforeUpdate->父 updated

销毁过程

父 beforeDestroy->子 beforeDestroy->子 destroyed->父 destroyed

之所以会这样是因为Vue创建过程是一个递归过程，先创建父组件，有子组件就会创建子组件，因此创建时先有父组件再有子组件；子组件首次创建时会添加mounted钩子到队列，等到patch结束再执行它们，可见子组件的mounted钩子是先进入到队列中的，因此等到patch结束执行这些钩子时也先执行。

function patch (oldVnode, vnode, hydrating, removeOnly) {
    
    if (isUndef(vnode)) {
    
      if (isDef(oldVnode)) invokeDestroyHook(oldVnode) return 
    }
    let isInitialPatch = false 
    const insertedVnodeQueue = [] // 定义收集所有组件的insert hook方法的数组 // somthing ... 
    createElm( 
        vnode, 
        insertedVnodeQueue, oldElm._leaveCb ? null : parentElm, 
        nodeOps.nextSibling(oldElm) 
    )// somthing... 
    // 最终会依次调用收集的insert hook 
    invokeInsertHook(vnode, insertedVnodeQueue, isInitialPatch);
    return vnode.elm
}

function createElm ( vnode, insertedVnodeQueue, parentElm, refElm, nested, ownerArray, index ) {
    
    // createChildren 会递归创建儿子组件 
    createChildren(vnode, children, insertedVnodeQueue) // something... 
} 
// 将组件的vnode插入到数组中 
function invokeCreateHooks (vnode, insertedVnodeQueue) {
    
    for (let i = 0; i < cbs.create.length; ++i) {
    
        cbs.create[i](emptyNode, vnode) 
    }
    i = vnode.data.hook // Reuse variable 
    if (isDef(i)) {
    
        if (isDef(i.create)) i.create(emptyNode, vnode) 
        if (isDef(i.insert)) insertedVnodeQueue.push(vnode) 
    } 
} 
// insert方法中会依次调用mounted方法 
insert (