JS优秀编码欣赏--vue patchVnode的部分思路整理

vue的patchVnode 方法中,判断 isStatic 并修改引用路径的操作

if (isTrue(vnode.isStatic) &&
  isTrue(oldVnode.isStatic) &&
  vnode.key === oldVnode.key &&
  (isTrue(vnode.isCloned) || isTrue(vnode.isOnce))
) {
  vnode.componentInstance = oldVnode.componentInstance
  return
}

这个判断很严谨

  • 1:新旧vnode 的isStatic都为true
  • 2:key相等
  • 3:vnode.isCloned 或者vnode.isOnce。

通过isCloned 和 isOnce的标示,避免因为引用关系造成的数据混乱。

vue的patchVnode 方法中,批量更新属性方法:cbs

cbs 工具方法,将更新方法作为数组添加进来,需要更新时,直接遍历数组进行更新

var cbs = {
    activate: [
        function _enter (_, vnode) {
        }
    ],
    create: [
        function updateAttrs (oldVnode, vnode) {
        }
    ],
    update: [
        function updateAttrs (oldVnode, vnode) {
        },
        function updateClass (oldVnode, vnode) {
        },
        function updateDOMListeners (oldVnode, vnode) {
        }
    ]
}
for (i = 0; i < cbs.update.length; ++i) { cbs.update[i](oldVnode, vnode); }

项目体量一旦起来,高效的可复用可维护性就非常重要了。这个思路可以

随机浏览