Vue指令的實(shí)現(xiàn)原理是什么

二、指令工作原理

2.1、初始化

初始化全局API時(shí)，在platforms/web下，調(diào)用createPatchFunction生成VNode轉(zhuǎn)換為真實(shí)DOM的patch方法，初始化中比較重要一步是定義了與DOM節(jié)點(diǎn)相對(duì)應(yīng)的hooks方法，在DOM的創(chuàng)建(create)、激活(avtivate)、更新(update)、移除(remove)、銷毀(destroy)過(guò)程中，分別會(huì)輪詢調(diào)用對(duì)應(yīng)的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對(duì)應(yīng)vue中模塊，具體有class, style, domListener, domProps, attrs, directive, ref, transition
    for (j = 0; j < modules.length; ++j) {
      if (isDef(modules[j][hooks[i]])) {
        // 最終將hooks轉(zhuǎn)換為{hookEvent: [cb1, cb2 ...], ...}形式
        cbs[hooks[i]].push(modules[j][hooks[i]])
      }
    }
  }
  // ....
  return function patch (oldVnode, vnode, hydrating, removeOnly) {
    // ...
  }
}

2.2、模板編譯

模板編譯就是解析指令參數(shù)，具體解構(gòu)后的ASTElement如下所示：

{
  tag: 'input',
  parent: ASTElement,
  directives: [
    {
      arg: null, // 參數(shù)
      end: 56, // 指令結(jié)束字符位置
      isDynamicArg: false, // 動(dòng)態(tài)參數(shù),v-xxx[dynamicParams]='xxx'形式調(diào)用
      modifiers: undefined, // 指令修飾符
      name: "model",
      rawName: "v-model", // 指令名稱
      start: 36, // 指令開(kāi)始字符位置
      value: "inputValue" // 模板
    },
    {
      arg: null,
      end: 67,
      isDynamicArg: false,
      modifiers: undefined,
      name: "focus",
      rawName: "v-focus",
      start: 57,
      value: ""
    }
  ],
  // ...
}

2.3、生成渲染方法

vue推薦采用指令的方式去操作DOM，由于自定義指令可能會(huì)修改DOM或者屬性，所以避免指令對(duì)模板解析的影響，在生成渲染方法時(shí)，首先處理的是指令，如v-model，本質(zhì)是一個(gè)語(yǔ)法糖，在拼接渲染函數(shù)時(shí)，會(huì)給元素加上value屬性與input事件（以input為例，這個(gè)也可以用戶自定義）。

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指令時(shí)添加的屬性
        },
        on: {
            "input": function($event) { // 處理v-model指令時(shí)添加的自定義事件
                if ($event.target.composing)
                    return;
                inputValue = $event.target.value
            }
        }
    })])
}

2.4、生成VNode

vue的指令設(shè)計(jì)是方便我們操作DOM,在生成VNode時(shí)，指令并沒(méi)有做額外處理。

2.5、生成真實(shí)DOM

在vue初始化過(guò)程中，我們需要記住兩點(diǎn)：

• 狀態(tài)的初始化是 父 -> 子，如beforeCreate、created、beforeMount，調(diào)用順序是 父 -> 子

• 真實(shí)DOM掛載順序是 子 -> 父，如mounted，這是因?yàn)樵谏烧鎸?shí)DOM過(guò)程中，如果遇到組件，會(huì)走組件創(chuàng)建的過(guò)程，真實(shí)DOM的生成是從子到父一級(jí)級(jí)拼接。

在patch過(guò)程中，每此調(diào)用createElm生成真實(shí)DOM時(shí)，都會(huì)檢測(cè)當(dāng)前VNode是否存在data屬性，存在，則會(huì)調(diào)用invokeCreateHooks，走初創(chuàng)建的鉤子函數(shù)，核心代碼如下：

// src/core/vdom/patch.js
function createElm (
    vnode,
    insertedVnodeQueue,
    parentElm,
    refElm,
    nested,
    ownerArray,
    index
  ) {
    // ...
    // createComponent有返回值，是創(chuàng)建組件的方法，沒(méi)有返回值，則繼續(xù)走下面的方法
    if (createComponent(vnode, insertedVnodeQueue, parentElm, refElm)) {
      return
    }

    const data = vnode.data
    // ....
    if (isDef(data)) {
        // 真實(shí)節(jié)點(diǎn)創(chuàng)建之后，更新節(jié)點(diǎn)屬性，包括指令
        // 指令首次會(huì)調(diào)用bind方法，然后會(huì)初始化指令后續(xù)hooks方法
        invokeCreateHooks(vnode, insertedVnodeQueue)
    }
    // 從底向上，依次插入
    insert(parentElm, vnode.elm, refElm)
    // ...
  }

以上是指令鉤子方法的第一個(gè)入口，是時(shí)候揭露directive.js神秘的面紗了，核心代碼如下：

// src/core/vdom/modules/directives.js

// 默認(rèn)拋出的都是updateDirectives方法
export default {
  create: updateDirectives,
  update: updateDirectives,
  destroy: function unbindDirectives (vnode: VNodeWithData) {
    // 銷毀時(shí)，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)
  // 插入后的回調(diào)
  const dirsWithInsert = [
  // 更新完成后回調(diào)
  const dirsWithPostpatch = []

  let key, oldDir, dir
  for (key in newDirs) {
    oldDir = oldDirs[key]
    dir = newDirs[key]
    // 新元素指令，會(huì)執(zhí)行一次inserted鉤子方法
    if (!oldDir) {
      // new directive, bind
      callHook(dir, 'bind', vnode, oldVnode)
      if (dir.def && dir.def.inserted) {
        dirsWithInsert.push(dir)
      }
    } else {
      // existing directive, update
      // 已經(jīng)存在元素，會(huì)執(zhí)行一次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) {
    // 真實(shí)DOM插入到頁(yè)面中，會(huì)調(diào)用此回調(diào)方法
    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)
      }
    }
  }
}

對(duì)于首次創(chuàng)建，執(zhí)行過(guò)程如下：

1.oldVnode === emptyNode，isCreate為true，調(diào)用當(dāng)前元素中所有bind鉤子方法。

2.檢測(cè)指令中是否存在inserted鉤子，如果存在，則將insert鉤子合并到VNode.data.hooks屬性中。

3.DOM掛載結(jié)束后，會(huì)執(zhí)行invokeInsertHook，所有已掛載節(jié)點(diǎn)，如果VNode.data.hooks中存在insert鉤子。則會(huì)調(diào)用，此時(shí)會(huì)觸發(fā)指令綁定的inserted方法。

一般首次創(chuàng)建只會(huì)走bind和inserted方法，而update和componentUpdated則與bind和inserted對(duì)應(yīng)。在組件依賴狀態(tài)發(fā)生改變時(shí)，會(huì)用VNode diff算法，對(duì)節(jié)點(diǎn)進(jìn)行打補(bǔ)丁式更新，其調(diào)用流程：

1.響應(yīng)式數(shù)據(jù)發(fā)生改變，調(diào)用dep.notify，通知數(shù)據(jù)更新。

2.調(diào)用patchVNode，對(duì)新舊VNode進(jìn)行差異化更新，并全量更新當(dāng)前VNode屬性（包括指令，就會(huì)進(jìn)入updateDirectives方法）。

3.如果指令存在update鉤子方法，調(diào)用update鉤子方法，并初始化componentUpdated回調(diào)，將postpatch hooks掛載到VNode.data.hooks中。

4.當(dāng)前節(jié)點(diǎn)及子節(jié)點(diǎn)更新完畢后，會(huì)觸發(fā)postpatch hooks，即指令的componentUpdated方法

核心代碼如下：

// src/core/vdom/patch.js
function patchVnode (
    oldVnode,
    vnode,
    insertedVnodeQueue,
    ownerArray,
    index,
    removeOnly
  ) {
    // ...
    const oldCh = oldVnode.children
    const ch = vnode.children
    // 全量更新節(jié)點(diǎn)的屬性
    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)) {
    // 調(diào)用postpatch鉤子
      if (isDef(i = data.hook) && isDef(i = i.postpatch)) i(oldVnode, vnode)
    }
  }

unbind方法是在節(jié)點(diǎn)銷毀時(shí)，調(diào)用invokeDestroyHook，這里不做過(guò)多描述。

三、注意事項(xiàng)

使用自定義指令時(shí)，和普通模板數(shù)據(jù)綁定，v-model還是存在一定的差別，如雖然我傳遞參數(shù)（v-xxx='param'）是一個(gè)引用類型，數(shù)據(jù)變化時(shí)，并不能觸發(fā)指令的bind或者inserted，這是因?yàn)樵谥噶畹穆暶髦芷趦?nèi)，bind和inserted只是在初始化時(shí)調(diào)用一次，后面只會(huì)走update和componentUpdated。

指令的聲明周期執(zhí)行順序?yàn)閎ind -> inserted -> update -> componentUpdated，如果指令需要依賴于子組件的內(nèi)容時(shí)，推薦在componentUpdated中寫(xiě)相應(yīng)業(yè)務(wù)邏輯。

vue中，很多方法都是循環(huán)調(diào)用，如hooks方法，事件回調(diào)等，一般調(diào)用都用try catch包裹，這樣做的目的是為了防止一個(gè)處理方法報(bào)錯(cuò)，導(dǎo)致整個(gè)程序崩潰，這一點(diǎn)在我們開(kāi)發(fā)過(guò)程中可以借鑒使用。

“Vue指令的實(shí)現(xiàn)原理是什么”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！