前言

自定义指令是vue中应用频率仅次于组件，其蕴含bind、inserted、update、componentUpdated、unbind五个生命周期钩子。本文将对vue指令的工作原理进行相应介绍，从本文中，你将失去：

  • 指令的工作原理
  • 指令应用的注意事项

根本应用

官网案例：

<div id='app'>  <input type="text" v-model="inputValue" v-focus></div><script>  Vue.directive('focus', {    // 第一次绑定元素时调用    bind () {      console.log('bind')    },    // 当被绑定的元素插入到 DOM 中时……    inserted: function (el) {      console.log('inserted')      el.focus()    },    // 所在组件VNode产生更新时调用    update () {      console.log('update')    },    // 指令所在组件的 VNode 及其子 VNode 全副更新后调用    componentUpdated () {      console.log('componentUpdated')    },    // 只调用一次，指令与元素解绑时调用    unbind () {      console.log('unbind')    }  })  new Vue({    data: {      inputValue: ''    }  }).$mount('#app')</script>

指令工作原理

初始化

初始化全局API时，在platforms/web下，调用createPatchFunction生成VNode转换为实在DOM的patch办法，初始化中比拟重要一步是定义了与DOM节点绝对应的hooks办法，在DOM的创立(create)、激活(avtivate)、更新(update)、移除(remove)、销毁(destroy)过程中，别离会轮询调用对应的hooks办法，这些hooks中一部分是指令申明周期的入口。

// src/core/vdom/patch.jsconst hooks = ['create', 'activate', 'update', 'remove', 'destroy']export function createPatchFunction (backend) {  let i, j  const cbs = {}  const { modules, nodeOps } = backend  for (i = 0; i < hooks.length; ++i) {    cbs[hooks[i]] = []    // modules对应vue中模块，具体有class, style, domListener, domProps, attrs, directive, ref, transition    for (j = 0; j < modules.length; ++j) {      if (isDef(modules[j][hooks[i]])) {        // 最终将hooks转换为{hookEvent: [cb1, cb2 ...], ...}模式        cbs[hooks[i]].push(modules[j][hooks[i]])      }    }  }  // ....  return function patch (oldVnode, vnode, hydrating, removeOnly) {    // ...  }}

模板编译

模板编译就是解析指令参数，具体解构后的ASTElement如下所示：

{  tag: 'input',  parent: ASTElement,  directives: [    {      arg: null, // 参数      end: 56, // 指令完结字符地位      isDynamicArg: false, // 动静参数,v-xxx[dynamicParams]='xxx'模式调用      modifiers: undefined, // 指令修饰符      name: "model",      rawName: "v-model", // 指令名称      start: 36, // 指令开始字符地位      value: "inputValue" // 模板    },    {      arg: null,      end: 67,      isDynamicArg: false,      modifiers: undefined,      name: "focus",      rawName: "v-focus",      start: 57,      value: ""    }  ],  // ...}

生成渲染办法

vue举荐采纳指令的形式去操作DOM，因为自定义指令可能会批改DOM或者属性，所以防止指令对模板解析的影响，在生成渲染办法时，首先解决的是指令，如v-model，实质是一个语法糖，在拼接渲染函数时，会给元素加上value属性与input事件（以input为例，这个也能够用户自定义）。

with (this) {    return _c('div', {        attrs: {            "id": "app"        }    }, [_c('input', {        directives: [{            name: "model",            rawName: "v-model",            value: (inputValue),            expression: "inputValue"        }, {            name: "focus",            rawName: "v-focus"        }],        attrs: {            "type": "text"        },        domProps: {            "value": (inputValue) // 解决v-model指令时增加的属性        },        on: {            "input": function($event) { // 解决v-model指令时增加的自定义事件                if ($event.target.composing)                    return;                inputValue = $event.target.value            }        }    })])}

生成VNode

vue的指令设计是不便咱们操作DOM,在生成VNode时，指令并没有做额定解决。

生成实在DOM

在vue初始化过程中，咱们须要记住两点：

  • 状态的初始化是 父 -> 子，如beforeCreate、created、beforeMount，调用程序是 父 -> 子
  • 实在DOM挂载程序是 子 -> 父，如mounted，这是因为在生成实在DOM过程中，如果遇到组件，会走组件创立的过程，实在DOM的生成是从子到父一级级拼接。

在patch过程中，每此调用createElm生成实在DOM时，都会检测以后VNode是否存在data属性，存在，则会调用invokeCreateHooks，走初创立的钩子函数，外围代码如下：

// src/core/vdom/patch.jsfunction createElm (    vnode,    insertedVnodeQueue,    parentElm,    refElm,    nested,    ownerArray,    index  ) {    // ...    // createComponent有返回值，是创立组件的办法，没有返回值，则持续走上面的办法    if (createComponent(vnode, insertedVnodeQueue, parentElm, refElm)) {      return    }    const data = vnode.data    // ....    if (isDef(data)) {        // 实在节点创立之后，更新节点属性，包含指令        // 指令首次会调用bind办法，而后会初始化指令后续hooks办法        invokeCreateHooks(vnode, insertedVnodeQueue)    }    // 从底向上，顺次插入    insert(parentElm, vnode.elm, refElm)    // ...  }

以上是指令钩子办法的第一个入口，是时候揭发directive.js神秘的面纱了，外围代码如下：

// src/core/vdom/modules/directives.js// 默认抛出的都是updateDirectives办法export default {  create: updateDirectives,  update: updateDirectives,  destroy: function unbindDirectives (vnode: VNodeWithData) {    // 销毁时，vnode === emptyNode    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)  // 插入后的回调  const dirsWithInsert = [  // 更新实现后回调  const dirsWithPostpatch = []  let key, oldDir, dir  for (key in newDirs) {    oldDir = oldDirs[key]    dir = newDirs[key]    // 新元素指令，会执行一次inserted钩子办法    if (!oldDir) {      // new directive, bind      callHook(dir, 'bind', vnode, oldVnode)      if (dir.def && dir.def.inserted) {        dirsWithInsert.push(dir)      }    } else {      // existing directive, update      // 曾经存在元素，会执行一次componentUpdated钩子办法      dir.oldValue = oldDir.value      dir.oldArg = oldDir.arg      callHook(dir, 'update', vnode, oldVnode)      if (dir.def && dir.def.componentUpdated) {        dirsWithPostpatch.push(dir)      }    }  }  if (dirsWithInsert.length) {    // 实在DOM插入到页面中，会调用此回调办法    const callInsert = () => {      for (let i = 0; i < dirsWithInsert.length; i++) {        callHook(dirsWithInsert[i], 'inserted', vnode, oldVnode)      }    }    // VNode合并insert hooks    if (isCreate) {      mergeVNodeHook(vnode, 'insert', callInsert)    } else {      callInsert()    }  }  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) {      if (!newDirs[key]) {        // no longer present, unbind        callHook(oldDirs[key], 'unbind', oldVnode, oldVnode, isDestroy)      }    }  }}

对于首次创立，执行过程如下：

  1. oldVnode === emptyNode，isCreate为true，调用以后元素中所有bind钩子办法。
  2. 检测指令中是否存在inserted钩子，如果存在，则将insert钩子合并到VNode.data.hooks属性中。
  3. DOM挂载完结后，会执行invokeInsertHook，所有已挂载节点，如果VNode.data.hooks中存在insert钩子。则会调用，此时会触发指令绑定的inserted办法。

个别首次创立只会走bind和inserted办法，而update和componentUpdated则与bind和inserted对应。在组件依赖状态产生扭转时，会用VNode diff算法，对节点进行打补丁式更新，其调用流程：

  1. 响应式数据产生扭转，调用dep.notify，告诉数据更新。
  2. 调用patchVNode，对新旧VNode进行差异化更新，并全量更新以后VNode属性（包含指令，就会进入updateDirectives办法）。
  3. 如果指令存在update钩子办法，调用update钩子办法，并初始化componentUpdated回调，将postpatch hooks挂载到VNode.data.hooks中。
  4. 以后节点及子节点更新结束后，会触发postpatch hooks，即指令的componentUpdated办法

外围代码如下：

// src/core/vdom/patch.jsfunction patchVnode (    oldVnode,    vnode,    insertedVnodeQueue,    ownerArray,    index,    removeOnly  ) {    // ...    const oldCh = oldVnode.children    const ch = vnode.children    // 全量更新节点的属性    if (isDef(data) && isPatchable(vnode)) {      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)    }    // ...    if (isDef(data)) {    // 调用postpatch钩子      if (isDef(i = data.hook) && isDef(i = i.postpatch)) i(oldVnode, vnode)    }  }

unbind办法是在节点销毁时，调用invokeDestroyHook，这里不做过多形容。

注意事项

应用自定义指令时，和一般模板数据绑定，v-model还是存在肯定的差异，如尽管我传递参数（v-xxx='param'）是一个援用类型，数据变动时，并不能触发指令的bind或者inserted，这是因为在指令的申明周期内，bind和inserted只是在初始化时调用一次，前面只会走update和componentUpdated。

指令的申明周期执行程序为bind -> inserted -> update -> componentUpdated，如果指令须要依赖于子组件的内容时，举荐在componentUnpdated中写相应业务逻辑。

vue中，很多办法都是循环调用，如hooks办法，事件回调等，个别调用都用try catch包裹，这样做的目标是为了避免一个解决办法报错，导致整个程序解体，这一点在咱们开发过程中能够借鉴应用。

小结

开始看整个vue源码时，对很多细枝末节办法都不怎么理解，通过梳理具体每个性能的实现时，慢慢可能看到整个vue全貌，同时也能防止开发应用中的一些坑点。

GitHub