1.为什么引入虚拟DOM（可以节省开销）
在vue1.0实现侦测变化的时候，一个状态绑定了好多个依赖，每个依赖代表着一个具体的DOM节点。当状态发生变化时，它在一定程度上会知道哪些节点使用了这些状态。但是这样做会有内存开销和依赖追踪的开销。对于一个大型项目来说，这个开销非常大。因此vue2.0选了一个中等粒度的方案，那就是引入虚拟DOM，并把依赖变成组件级别。当状态发生变化时，只通知到组件，然后组件内部使用虚拟DOM进行对比，根据结果只更新需要更新的真实DOM节点，从而避免不必要的DOM操作，节省开销。
2.什么虚拟DOM

虚拟DOM是将状态映射成视图的一种解决方案。
虚拟DOM的原理或者概念：就是使用状态生成虚拟节点，将新的虚拟节点vnode和旧虚拟节点oldvnode对比，然后更新视图。
3.什么是vnode(虚拟节点)
Vnode可以理解成一个节点描述对象。它描述了应该怎样创建真实的DOM节点。
4.vnode的作用/渲染视图的过程
先创建vnode，再使用vnode生成真实的DOM元素，最后插入到页面渲染视图。
5.为什么使用diff/patch算法对比两个节点的差异
因为DOM操作的执行速度远不如js的运算速度快，使用patch算法计算出真正要更新的节点，减少DOM操作，从而提高性能。
6.Patch/diff算法（补丁，修补）
概念：对比新旧两个vnode之间的差异，然后找出需要更新的节点进行更新。并将vnode渲染成真实的DOM。
当旧虚拟节点不存在时，直接使用vnode渲染视图（比如首次渲染视图）;当旧虚拟节点与新的虚拟节点都存在但并不是同一个节点时，使用vnode创建的DOM元素替换旧的DOM元素，（先插到旁边，再删除）；当旧虚拟节点和新虚拟节点是同一个节点时，使用更详细的对比操作对真实节点进行更新（在后面的流程图里面）。
DOM操作非常昂贵，为了减少对DOM的操作，vue.js将DOM抽象成了一个以js对象为节点的虚拟DOM树，用VNode节点模拟真实DOM节点，可以对虚拟DOM节点进行创建，删除以及修改等操作，这个过程不需要操作真实DOM。当数据发生改变时，Vue.js会使用diff算法比对oldvnode和vnode，得出最小的修改单位，对真实DOM打补丁。
当数据进行更新的时候，会触发update函数，该函数会接收一个VNode对象，利用_patch_方法对比VNode和OldVNode，并对真实的DOM打补丁，_patch_的核心就是diff算法。diff算法是通过同层的树节点进行比较，而不是对树进行逐层搜索，时间复杂度只有log(n)。
diff算法：使用sameVNode函数判断是否为相同节点（对比标签名tag,属性key,是否为注释节点iscomment是否相同），不是相同节点则在真实DOM上创建新的DOM，移除旧的DOM；是相同节点则调用patchVnode函数比较节点。
sameVnode函数：

/*a b表示前后两个虚拟树的节点tag为标签名isComment表示是否为注释对于标签是input的节点，要求type必须相同*/
function sameVnode (a, b) {return (a.key === b.key &&a.tag === b.tag &&a.isComment === b.isComment &&isDef(a.data) === isDef(b.data) &&sameInputType(a, b))
}
// 判断input的type是否相同
function sameInputType (a, b) {if (a.tag !== 'input') return true // 标签不是input，无需比较type，直接返回truelet iconst typeA = isDef(i = a.data) && isDef(i = i.attrs) && i.typeconst typeB = isDef(i = b.data) && isDef(i = i.attrs) && i.typereturn typeA === typeB
}

patchVnode函数：

/*patch VNode节点*/
function patchVnode (oldVnode, vnode, insertedVnodeQueue, removeOnly) {/*两个VNode节点相同则直接返回*/if (oldVnode === vnode) {return}/*如果新旧VNode都是静态的，同时它们的key相同（代表同一节点），并且新的VNode是clone或者是标记了once（标记v-once属性，只渲染一次），那么只需要替换elm以及componentInstance即可。*/if (isTrue(vnode.isStatic) &&isTrue(oldVnode.isStatic) &&vnode.key === oldVnode.key &&(isTrue(vnode.isCloned) || isTrue(vnode.isOnce))) {vnode.elm = oldVnode.elmvnode.componentInstance = oldVnode.componentInstancereturn}let iconst data = vnode.dataif (isDef(data) && isDef(i = data.hook) && isDef(i = i.prepatch)) {/*i = data.hook.prepatch，如果存在的话，见"./create-component componentVNodeHooks"。*/i(oldVnode, vnode)}const elm = vnode.elm = oldVnode.elmconst oldCh = oldVnode.childrenconst ch = vnode.childrenif (isDef(data) && isPatchable(vnode)) {/*调用update回调以及update钩子*/for (i = 0; i < cbs.update.length; ++i) cbs.update[i](oldVnode, vnode)if (isDef(i = data.hook) && isDef(i = i.update)) i(oldVnode, vnode)}/*如果这个VNode节点没有text文本时*/if (isUndef(vnode.text)) {if (isDef(oldCh) && isDef(ch)) {/*新老节点均有children子节点，则对子节点进行diff操作，调用updateChildren*/if (oldCh !== ch) updateChildren(elm, oldCh, ch, insertedVnodeQueue, removeOnly)} else if (isDef(ch)) {/*如果老节点没有子节点而新节点存在子节点，先清空elm的文本内容，然后为当前节点加入子节点*/if (isDef(oldVnode.text)) nodeOps.setTextContent(elm, '')addVnodes(elm, null, ch, 0, ch.length - 1, insertedVnodeQueue)} else if (isDef(oldCh)) {/*当新节点没有子节点而老节点有子节点的时候，则移除所有ele的子节点*/removeVnodes(elm, oldCh, 0, oldCh.length - 1)} else if (isDef(oldVnode.text)) {/*当新老节点都无子节点的时候，只是文本的替换，因为这个逻辑中新节点text不存在，所以直接去除ele的文本*/nodeOps.setTextContent(elm, '')}} else if (oldVnode.text !== vnode.text) {/*当新老节点text不一样时，直接替换这段文本*/nodeOps.setTextContent(elm, vnode.text)}/*调用postpatch钩子*/if (isDef(data)) {if (isDef(i = data.hook) && isDef(i = i.postpatch)) i(oldVnode, vnode)}
}

找到VNode和OldVnode对应的真实DOM，即el，判断Vnode和oldVnode是否指向同一节点，是就返回。如果两者都有文本节点且不相等，将el的文本节点设置为Vnode的文本节点。
如果oldVnode有子节点，Vnode没有，则删除el的子节点；如果oldVnode没有子节点，Vnode有，将Vnode的子节点真实化后添加到el；如果都有子节点，就调用updateChildren函数比较子节点。
updateChildren函数：

function updateChildren (parentElm, oldCh, newCh, insertedVnodeQueue, removeOnly) {let oldStartIdx = 0let newStartIdx = 0let oldEndIdx = oldCh.length - 1let oldStartVnode = oldCh[0]let oldEndVnode = oldCh[oldEndIdx]let newEndIdx = newCh.length - 1let newStartVnode = newCh[0]let newEndVnode = newCh[newEndIdx]let oldKeyToIdx, idxInOld, elmToMove, refElm// removeOnly is a special flag used only by <transition-group>// to ensure removed elements stay in correct relative positions// during leaving transitionsconst canMove = !removeOnlywhile (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {if (isUndef(oldStartVnode)) {oldStartVnode = oldCh[++oldStartIdx] // Vnode has been moved left} else if (isUndef(oldEndVnode)) {oldEndVnode = oldCh[--oldEndIdx]} else if (sameVnode(oldStartVnode, newStartVnode)) {/*前四种情况其实是指定key的时候，判定为同一个VNode，则直接patchVnode即可，分别比较oldCh以及newCh的两头节点2*2=4种情况*/patchVnode(oldStartVnode, newStartVnode, insertedVnodeQueue)oldStartVnode = oldCh[++oldStartIdx]newStartVnode = newCh[++newStartIdx]} else if (sameVnode(oldEndVnode, newEndVnode)) {patchVnode(oldEndVnode, newEndVnode, insertedVnodeQueue)oldEndVnode = oldCh[--oldEndIdx]newEndVnode = newCh[--newEndIdx]} else if (sameVnode(oldStartVnode, newEndVnode)) { // Vnode moved rightpatchVnode(oldStartVnode, newEndVnode, insertedVnodeQueue)canMove && nodeOps.insertBefore(parentElm, oldStartVnode.elm, nodeOps.nextSibling(oldEndVnode.elm))oldStartVnode = oldCh[++oldStartIdx]newEndVnode = newCh[--newEndIdx]} else if (sameVnode(oldEndVnode, newStartVnode)) { // Vnode moved leftpatchVnode(oldEndVnode, newStartVnode, insertedVnodeQueue)canMove && nodeOps.insertBefore(parentElm, oldEndVnode.elm, oldStartVnode.elm)oldEndVnode = oldCh[--oldEndIdx]newStartVnode = newCh[++newStartIdx]} else {/*生成一个key与旧VNode的key对应的哈希表（只有第一次进来undefined的时候会生成，也为后面检测重复的key值做铺垫）比如childre是这样的 [{xx: xx, key: 'key0'}, {xx: xx, key: 'key1'}, {xx: xx, key: 'key2'}]  beginIdx = 0   endIdx = 2  结果生成{key0: 0, key1: 1, key2: 2}*/if (isUndef(oldKeyToIdx)) oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx)/*如果newStartVnode新的VNode节点存在key并且这个key在oldVnode中能找到则返回这个节点的idxInOld（即第几个节点，下标）*/idxInOld = isDef(newStartVnode.key) ? oldKeyToIdx[newStartVnode.key] : nullif (isUndef(idxInOld)) { // New element/*newStartVnode没有key或者是该key没有在老节点中找到则创建一个新的节点*/createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm)newStartVnode = newCh[++newStartIdx]} else {/*获取同key的老节点*/elmToMove = oldCh[idxInOld]/* istanbul ignore if */if (process.env.NODE_ENV !== 'production' && !elmToMove) {/*如果elmToMove不存在说明之前已经有新节点放入过这个key的DOM中，提示可能存在重复的key，确保v-for的时候item有唯一的key值*/warn('It seems there are duplicate keys that is causing an update error. ' +'Make sure each v-for item has a unique key.')}if (sameVnode(elmToMove, newStartVnode)) {/*Github:https://github.com/answershuto*//*如果新VNode与得到的有相同key的节点是同一个VNode则进行patchVnode*/patchVnode(elmToMove, newStartVnode, insertedVnodeQueue)/*因为已经patchVnode进去了，所以将这个老节点赋值undefined，之后如果还有新节点与该节点key相同可以检测出来提示已有重复的key*/oldCh[idxInOld] = undefined/*当有标识位canMove实可以直接插入oldStartVnode对应的真实DOM节点前面*/canMove && nodeOps.insertBefore(parentElm, newStartVnode.elm, oldStartVnode.elm)newStartVnode = newCh[++newStartIdx]} else {// same key but different element. treat as new element/*当新的VNode与找到的同样key的VNode不是sameVNode的时候（比如说tag不一样或者是有不一样type的input标签），创建一个新的节点*/createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm)newStartVnode = newCh[++newStartIdx]}}}}if (oldStartIdx > oldEndIdx) {/*全部比较完成以后，发现oldStartIdx > oldEndIdx的话，说明老节点已经遍历完了，新节点比老节点多，所以这时候多出来的新节点需要一个一个创建出来加入到真实DOM中*/refElm = isUndef(newCh[newEndIdx + 1]) ? null : newCh[newEndIdx + 1].elmaddVnodes(parentElm, refElm, newCh, newStartIdx, newEndIdx, insertedVnodeQueue)} else if (newStartIdx > newEndIdx) {/*如果全部比较完成以后发现newStartIdx > newEndIdx，则说明新节点已经遍历完了，老节点多余新节点，这个时候需要将多余的老节点从真实DOM中移除*/removeVnodes(parentElm, oldCh, oldStartIdx, oldEndIdx)}}

比较子节点的过程，也就是调用了updateChildren函数之后：
将Vnode的子节点Vch和OldVnode的子节点oldch提取出来
vch和oldch都在首尾共设置了startIdx和endIdx变量，2个变量相互比较，若四种比较都未匹配，如果设置了key，利用key进行比较。比较过程中变量会向中间移，出现startIdx>endIdx则表示至少存在一个遍历完成，比较就结束了。

创建新增节点：

修改要更新的节点：


更新子节点的过程：
为列表渲染设置了key属性，可以标识一个节点唯一的id。Key这个属性主要用在vuejs的虚拟DOM算法中，在更新子节点时，需要从旧虚拟节点列表中查找与新虚拟节点相同的节点进行更新。如果在节点上设置了key属性，那么在oldchildren中找相同节点时，可以直接通过key拿到下标，获取节点。根本不用通过循环来查找节点。查找速度会快很多。