Vue2源码解析之自定义指令

// 全局
// 注册一个全局自定义指令 `v-focus`  
Vue.directive('focus', {  
    // 当被绑定的元素插入到 DOM 中时……  
    inserted: function (el) {  
        // 聚焦元素  
        el.focus()  
    }  
})
// 组件内
directives: {  
    focus: {  
        // 指令的定义  
        inserted: function (el) {  
            el.focus()  
        }  
    }  
}
<input v-focus>

<div id="hook-arguments-example" v-demo:foo.a.b="message"></div>
Vue.directive('demo', {  
    bind: function (el, binding, vnode) {  
        var s = JSON.stringify  
        el.innerHTML =  
            'name: ' + s(binding.name) + '<br>' +  
            'value: ' + s(binding.value) + '<br>' +  
            'expression: ' + s(binding.expression) + '<br>' +  
            'argument: ' + s(binding.arg) + '<br>' +  
            'modifiers: ' + s(binding.modifiers) + '<br>' +  
            'vnode keys: ' + Object.keys(vnode).join(', ')  
    }  
})  
new Vue({  
    el: '#hook-arguments-example',  
    data: {  
        message: 'hello!'  
    }  
})

// 源码位置： src/core/vdom/modules/directives.js
export default {
  create: updateDirectives,
  update: updateDirectives,
  destroy: function unbindDirectives (vnode: VNodeWithData) {
    updateDirectives(vnode, emptyNode)
  }
}
function updateDirectives (oldVnode: VNodeWithData, vnode: VNodeWithData) {
  if (oldVnode.data.directives || vnode.data.directives) {
    _update(oldVnode, vnode)
  }
}
function _update (oldVnode, vnode) {
  // 旧节点不存在就表示是新创建的
  const isCreate = oldVnode === emptyNode
  // 新节点不存在表示是需要删除的
  const isDestroy = vnode === emptyNode
  // 旧节点中的指令集合
  const oldDirs = normalizeDirectives(oldVnode.data.directives, oldVnode.context)
  // 新节点中的指令集合
  const newDirs = normalizeDirectives(vnode.data.directives, vnode.context)
  // 保存需要执行inserted钩子的指令
  const dirsWithInsert = []
  // 保存需要执行update钩子的指令
  const dirsWithPostpatch = []
  let key, oldDir, dir
  // 遍历新节点的指令
  for (key in newDirs) {
    // 获取到旧节点中对应的指令
    oldDir = oldDirs[key]
    dir = newDirs[key]
    // 如果旧节点中的指令不存在 表示是新添加的，通过bind进行绑定
    if (!oldDir) {
      // new directive, bind
      callHook(dir, 'bind', vnode, oldVnode)
      // 如有inserted就进行添加
      if (dir.def && dir.def.inserted) {
        dirsWithInsert.push(dir)
      }
    } else { // 如果旧节点中的指令存在 表示是需要更新的，执行update
      // existing directive, update
      dir.oldValue = oldDir.value
      dir.oldArg = oldDir.arg
      callHook(dir, 'update', vnode, oldVnode)
      if (dir.def && dir.def.componentUpdated) {
        dirsWithPostpatch.push(dir)
      }
    }
  }
  // 如果dirsWithInsert有值
  if (dirsWithInsert.length) {
    // 创建一个函数，函数内部遍历dirsWithInsert并且执行inserted钩子
    const callInsert = () => {
      for (let i = 0; i < dirsWithInsert.length; i++) {
        callHook(dirsWithInsert[i], 'inserted', vnode, oldVnode)
      }
    }
    // 如果是新建的，就和insert钩子进行合并执行
    if (isCreate) {
      mergeVNodeHook(vnode, 'insert', callInsert)
    } else {
      // 否则执行指令中的inserted钩子
      callInsert()
    }
  }
  // dirsWithPostpatch有值 就合并componentUpdated和postpatch钩子在dom更新的时候执行
  if (dirsWithPostpatch.length) {
    mergeVNodeHook(vnode, 'postpatch', () => {
      for (let i = 0; i < dirsWithPostpatch.length; i++) {
        callHook(dirsWithPostpatch[i], 'componentUpdated', vnode, oldVnode)
      }
    })
  }
  // 如果不是新建的
  if (!isCreate) {
    // 遍历旧节点中的指令
    for (key in oldDirs) {
      // 如果新节点中不存在此指令，表示是要解绑的，调用unbind钩子
      if (!newDirs[key]) {
        // no longer present, unbind
        callHook(oldDirs[key], 'unbind', oldVnode, oldVnode, isDestroy)
      }
    }
  }
}

export default {
  create: updateDirectives,
  update: updateDirectives,
  destroy: function unbindDirectives (vnode: VNodeWithData) {
    updateDirectives(vnode, emptyNode)
  }
}
function updateDirectives (oldVnode: VNodeWithData, vnode: VNodeWithData) {
  // 旧节点的指令或新节点的指令存在
  if (oldVnode.data.directives || vnode.data.directives) {
    _update(oldVnode, vnode)
  }
}

// 旧节点不存在就表示是新创建的
const isCreate = oldVnode === emptyNode
// 新节点不存在表示是需要删除的
const isDestroy = vnode === emptyNode
// 旧节点中的指令集合
const oldDirs = normalizeDirectives(oldVnode.data.directives, oldVnode.context)
// 新节点中的指令集合
const newDirs = normalizeDirectives(vnode.data.directives, vnode.context)
// 保存需要执行inserted钩子的指令
const dirsWithInsert = []
// 保存需要执行update钩子的指令
const dirsWithPostpatch = []

let key, oldDir, dir
  // 遍历新节点的指令
  for (key in newDirs) {
    // 获取到旧节点中对应的指令
    oldDir = oldDirs[key]
    dir = newDirs[key]

// 如果旧节点中的指令不存在 表示是新添加的，通过bind进行绑定
if (!oldDir) {
  // new directive, bind
  callHook(dir, 'bind', vnode, oldVnode)
  // 如有inserted就进行添加
  if (dir.def && dir.def.inserted) {
    dirsWithInsert.push(dir)
  }
}

else { // 如果旧节点中的指令存在 表示是需要更新的，执行update
  // existing directive, update
  dir.oldValue = oldDir.value
  dir.oldArg = oldDir.arg
  callHook(dir, 'update', vnode, oldVnode)
  if (dir.def && dir.def.componentUpdated) {
    dirsWithPostpatch.push(dir)
  }
}

// 如果dirsWithInsert有值
if (dirsWithInsert.length) {
    // 创建一个函数，函数内部遍历dirsWithInsert并且执行inserted钩子
    const callInsert = () => {
      for (let i = 0; i < dirsWithInsert.length; i++) {
        callHook(dirsWithInsert[i], 'inserted', vnode, oldVnode)
      }
    }
    // 如果是新建的，就和insert钩子进行合并执行
    if (isCreate) {
      mergeVNodeHook(vnode, 'insert', callInsert)
    } else {
      // 否则执行指令中的inserted钩子
      callInsert()
    }
}

// dirsWithPostpatch有值 就合并componentUpdated和postpatch钩子在dom更新的时候执行
if (dirsWithPostpatch.length) {
    mergeVNodeHook(vnode, 'postpatch', () => {
      for (let i = 0; i < dirsWithPostpatch.length; i++) {
        callHook(dirsWithPostpatch[i], 'componentUpdated', vnode, oldVnode)
      }
    })
}

// 如果不是新建的
if (!isCreate) {
    // 遍历旧节点中的指令
    for (key in oldDirs) {
      // 如果新节点中不存在此指令，表示是要解绑的，调用unbind钩子
      if (!newDirs[key]) {
        // no longer present, unbind
        callHook(oldDirs[key], 'unbind', oldVnode, oldVnode, isDestroy)
      }
    }
}

const emptyModifiers = Object.create(null)
/**
 * 获取到钩子的值，并且进行统一的格式化操作
 * @param {*} dirs 
 * @param {*} vm 
 * @returns 
   格式化之后的结果
   {
 *  v-focus: {
 *    name: 'focus', // 指令名称
 *    value: '', // 指令值
 *    arg: '', // 参数
 *    modifiers: {}, // 修饰符
 *    def: { inserted: fn } // 回调
 *  }
 * }
 */
function normalizeDirectives (
  dirs: ?Array<VNodeDirective>,
  vm: Component
): { [key: string]: VNodeDirective } {
  // 创建一个对象
  const res = Object.create(null)
  // 指令不存在直接返回
  if (!dirs) {
    // $flow-disable-line
    return res
  }
  let i, dir
  // 遍历指令
  for (i = 0; i < dirs.length; i++) {
    dir = dirs[i]
    // 如果修饰符属性不存在就创建一个空的对象
    if (!dir.modifiers) {
      // $flow-disable-line
      dir.modifiers = emptyModifiers
    }
    // 添加到对象上
    res[getRawDirName(dir)] = dir
    // 找出指令的值
    dir.def = resolveAsset(vm.$options, 'directives', dir.name, true)
  }
  // $flow-disable-line
  return res
}
function getRawDirName (dir: VNodeDirective): string {
  return dir.rawName || `${dir.name}.${Object.keys(dir.modifiers || {}).join('.')}`
}

function callHook (dir, hook, vnode, oldVnode, isDestroy) {
  const fn = dir.def && dir.def[hook]
  if (fn) {
    try {
      fn(vnode.elm, dir, vnode, oldVnode, isDestroy)
    } catch (e) {
      handleError(e, vnode.context, `directive ${dir.name} ${hook} hook`)
    }
  }
}