目錄

• 一、基本使用
• 二、指令工作原理
• 2.1、初始化
• 2.2、模板編譯
• 2.3、生成渲染方法
• 2.4、生成VNode
• 2.5、生成真實DOM
• 三、注意事項
• 四、小結

一、基本使用

官網案例：

<div id='app'>
  <input type="text" v-model="inputValue" v-focus>
</div>
<script>
  .directive('focus',{
    // 第一次繫結元素時呼叫
    bind () {
      console.log('bind')
    },// 當被繫結的元素插入到 DOM 中時……
http://www.cppcns.com
 
    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({
    http://www.cppcns.com
 
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.
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",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,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',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,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',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',oldVnode)
      }
    })
  }

  if (!isCreate) {
    for (key in oldDirs) {
      if (!newDirs[key]) {
        // no longer present,unbind
        callHook(oldDirs[key],'unbind',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.hookshttp://www.cppcns.com中。

4.當前節點及子節點更新完畢後，會觸發postpatch hooks，即指令的componentUpdated方法

核心程式碼如下：

// src/core/vdom/patch.js
function patchVnode (
    oldVnode,insertedVnodeQueue,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 http://www.cppcns.com-> update -> componentUpdated，如果指令需要依賴於子元件的內容時，推薦在componentUpdated中寫相應業務邏輯。

vue中，很多方法都是迴圈呼叫，如hooks方法，事件回撥等，一般呼叫都用try catch包裹，這樣做的目的是為了防止一個處理方法報錯，導致整個程式崩潰，這一點在我們開發過程中可以借鑑使用。

四、小結

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

以上就是分析Vue指令實現原理的詳細內容，更多關於Vue指令原理的資料請關注我們其它相關文章！