关于vue.js:Vue指令实现原理

37次阅读

共计 6196 个字符，预计需要花费 16 分钟才能阅读完成。

前言

自定义指令是 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.js
const 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.js
function 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.js
function 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

正文完
vue.js
发表至： vue.js
2021-06-27
 0
关于vue.js:vue源码分析动态组件
关于vue.js:iview按需引入ie11不兼容报无效字符问题解决
关于vue.js:JavaScript中循环遍历JSON响应
关于vue.js:用vue一分钟快速实现一个可视化编辑器流程图拓扑图web组态SCADA