Vue之组件更新

示例1：新旧节点不同

<template>
  <div id="app">
    <hello-world :flag="flag" />
    <button @click="toggle">toggle</button>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld/index'
export default {
  name: 'App',
  components: {
    HelloWorld
  },
  data() {
    return {
      flag: true
    };
  },
  methods: {
    toggle() {
      this.flag = !this.flag;
    }
  }
}
</script>

<template>
  <div class="hello" v-if="flag">
    <h1>{{ nested.msg }}</h1>
    <h2>Essential links</h2>
    <h2>ecosystem</h2>
    <ul>
      <li><a href="" target="_blank">vur-router</a></li>
      <li><a href="" target="_blank">vur-router</a></li>
      <li><a href="" target="_blank">vur-router</a></li>
      <li><a href="" target="_blank">vur-router</a></li>
      <li><a href="" target="_blank">vur-router</a></li>
    </ul>
  </div>
  <ul v-else>
    <li><a href="" target="_blank">Twitter</a></li>
    <li><a href="" target="_blank">Twitter</a></li>
    <li><a href="" target="_blank">Twitter</a></li>
    <li><a href="" target="_blank">Twitter</a></li>
    <li><a href="" target="_blank">Twitter</a></li>
  </ul>
</template>

<script>
  export default {
    name: "index",
    props: ['flag'],
    data() {
      return {
        nested: {
          mag: 'welcome to your vue.js app'
        }
      };
    }
  }
</script>

• 当点击toggle时，首先触发setter，然后走到App组件的渲染watcher update，在nextTick中执行flushSchedulerQueue(标记 flushing 为 true )，执行watcher.run，执行get。

• 走到App组件的patch，会走到sameVnode

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)
      ) || (
        isTrue(a.isAsyncPlaceholder) &&
        a.asyncFactory === b.asyncFactory &&
        isUndef(b.asyncFactory.error)
      )
    )
  )
}

• 此时判断新旧节点相同，进入patchVnode，当更新的vnode是一个组件vnode的时候，会执行prepatch方法，此时会执子组件(HelloWorld组件)的prepatch钩子函数

if (isDef(data) && isDef(i = data.hook) && isDef(i = i.prepatch)) {
   i(oldVnode, vnode)
}

• 该函数执行updateChildComponent，该函数对子组件数据做更新（对$attrs，$listeners，props等），更新flag的变化时，触发dep.notify()，执行子组件的update，此时由于flushing会true，渲染watcher会进入当前queue，所以父子组件的更新在一个tick中。

• 进入到子组件的ptach，此时新旧节点不同，会进入新旧节点不同的逻辑，首先创建vode，然后执行更新父组件的占位符vnode，首先判断当前vnode是否可挂载，最后移除旧节点，插入新节点。

 

 

 

示例2：新旧节点相同且都有子节点

<template>
  <div id="app">
    <div>
      <ul>
        <li v-for="item in items" :key="item.id">{{ item.val }}</li>
      </ul>
    </div>
    <button @click="change">change</button>
  </div>
</template>

<script>
// import HelloWorld from './components/HelloWorld/index'
export default {
  name: 'App',
  components: {
    // HelloWorld
  },
  data() {
    return {
      items: [
        { id: 0, val: 'A'},
        { id: 1, val: 'B'},
        { id: 2, val: 'C'},
        { id: 3, val: 'D'},
      ]
    };
  },
  methods: {
    change() {
      this.items.reverse().push({ id: 4, val: 'E'});
    }
  }
}
</script>

 

• 点击change按钮进入App组件的patch过程，此时新旧节点不同且都存在子节点进入patchVnode，分别拿新旧节点的child，进入updateChildren，此函数是组件更新核心也是最复杂的

while (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)) {
        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 right
        patchVnode(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 left
        patchVnode(oldEndVnode, newStartVnode, insertedVnodeQueue)
        canMove && nodeOps.insertBefore(parentElm, oldEndVnode.elm, oldStartVnode.elm)
        oldEndVnode = oldCh[--oldEndIdx]
        newStartVnode = newCh[++newStartIdx]
      } else {
        if (isUndef(oldKeyToIdx)) oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx)
        idxInOld = isDef(newStartVnode.key)
          ? oldKeyToIdx[newStartVnode.key]
          : findIdxInOld(newStartVnode, oldCh, oldStartIdx, oldEndIdx)
        if (isUndef(idxInOld)) { // New element
          createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm, false, newCh, newStartIdx)
        } else {
          vnodeToMove = oldCh[idxInOld]
          if (sameVnode(vnodeToMove, newStartVnode)) {
            patchVnode(vnodeToMove, newStartVnode, insertedVnodeQueue)
            oldCh[idxInOld] = undefined
            canMove && nodeOps.insertBefore(parentElm, vnodeToMove.elm, oldStartVnode.elm)
          } else {
            // same key but different element. treat as new element
            createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm, false, newCh, newStartIdx)
          }
        }
        newStartVnode = newCh[++newStartIdx]
      }
    }

• 该函数的核心是执行新旧vnode的diff算法，根据不同情况做不同的更新逻辑，递归调用patchVnode方法，最后执行完之后页面已经被替换成了新节点。

 

 

总结：

1、组件更新的过程核心就是新旧vnode diff算法，对新旧节点相同以及不同的情况分别做不同的处理。

2、新旧节点不同的更新流程是：创建新节点=>更新父组件占位符=>删除旧节点。

3、新旧节点相同的更新流程是去获取它们的child，根据不同情况做不同的更新逻辑。