分析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>

二、指令工作原理

2.1、初始化

初始化全局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) {
    // ...
  }
}

2.2、模板編譯

模板編譯就是解析指令參數,具體解構後的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: ""
    }
  ],
  // ...
}

2.3、生成渲染方法

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
            }
        }
    })])
}

2.4、生成VNode

vue的指令設計是方便我們操作DOM,在生成VNode時,指令並沒有做額外處理。

2.5、生成真實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,如果指令需要依賴於子組件的內容時,推薦在componentUpdated中寫相應業務邏輯。

vue中,很多方法都是循環調用,如hooks方法,事件回調等,一般調用都用try catch包裹,這樣做的目的是為瞭防止一個處理方法報錯,導致整個程序崩潰,這一點在我們開發過程中可以借鑒使用。

四、小結

開始看整個vue源碼時,對很多細枝末節方法都不怎麼瞭解,通過梳理具體每個功能的實現時,漸漸能夠看到整個vue全貌,同時也能避免開發使用中的一些坑點。

以上就是分析Vue指令實現原理的詳細內容,更多關於Vue指令原理的資料請關註WalkonNet其它相關文章!

推薦閱讀: