目錄一、基本使用二、指令工作原理2.1、初始化2.2、模板編譯2.3、生成渲染方法2.4、生成VNode2.5、生成真實DOM三、注意事項四、小結(jié)一、基本使用

官網(wǎng)案例：

<div id=’app’> <input type='text' v-model='inputValue' v-focus></div><script> Vue.directive(’focus’, { // 第一次綁定元素時調(diào)用 bind () { console.log(’bind’) }, // 當(dāng)被綁定的元素插入到 DOM 中時…… inserted: function (el) { console.log(’inserted’) el.focus() }, // 所在組件VNode發(fā)生更新時調(diào)用 update () { console.log(’update’) }, // 指令所在組件的 VNode 及其子 VNode 全部更新后調(diào)用 componentUpdated () { console.log(’componentUpdated’) }, // 只調(diào)用一次，指令與元素解綁時調(diào)用 unbind () { console.log(’unbind’) } }) new Vue({ data: { inputValue: ’’ } }).$mount(’#app’)</script>二、指令工作原理2.1、初始化

初始化全局API時，在platforms/web下，調(diào)用createPatchFunction生成VNode轉(zhuǎn)換為真實DOM的patch方法，初始化中比較重要一步是定義了與DOM節(jié)點相對應(yīng)的hooks方法，在DOM的創(chuàng)建(create)、激活(avtivate)、更新(update)、移除(remove)、銷毀(destroy)過程中，分別會輪詢調(diào)用對應(yīng)的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對應(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, // 動態(tài)參數(shù),v-xxx[dynamicParams]=’xxx’形式調(diào)用 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，本質(zhì)是一個語法糖，在拼接渲染函數(shù)時，會給元素加上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的指令設(shè)計是方便我們操作DOM,在生成VNode時，指令并沒有做額外處理。

2.5、生成真實DOM

在vue初始化過程中，我們需要記住兩點：

狀態(tài)的初始化是 父 -> 子，如beforeCreate、created、beforeMount，調(diào)用順序是 父 -> 子 真實DOM掛載順序是 子 -> 父，如mounted，這是因為在生成真實DOM過程中，如果遇到組件，會走組件創(chuàng)建的過程，真實DOM的生成是從子到父一級級拼接。

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

// src/core/vdom/patch.jsfunction createElm ( vnode, insertedVnodeQueue, parentElm, refElm, nested, ownerArray, index ) { // ... // createComponent有返回值，是創(chuàng)建組件的方法，沒有返回值，則繼續(xù)走下面的方法 if (createComponent(vnode, insertedVnodeQueue, parentElm, refElm)) { return } const data = vnode.data // .... if (isDef(data)) {// 真實節(jié)點創(chuàng)建之后，更新節(jié)點屬性，包括指令// 指令首次會調(diào)用bind方法，然后會初始化指令后續(xù)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) // 插入后的回調(diào) const dirsWithInsert = [ // 更新完成后回調(diào) const dirsWithPostpatch = [] let key, oldDir, dir for (key in newDirs) { oldDir = oldDirs[key] dir = newDirs[key] // 新元素指令，會執(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)存在元素，會執(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) { // 真實DOM插入到頁面中，會調(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, unbindcallHook(oldDirs[key], ’unbind’, oldVnode, oldVnode, isDestroy) } } }}

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

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

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

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

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

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

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

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

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

核心代碼如下：

// src/core/vdom/patch.jsfunction patchVnode ( oldVnode, vnode, insertedVnodeQueue, ownerArray, index, removeOnly ) { // ... const oldCh = oldVnode.children const ch = vnode.children // 全量更新節(jié)點的屬性 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ào)用invokeDestroyHook，這里不做過多描述。

三、注意事項

使用自定義指令時，和普通模板數(shù)據(jù)綁定，v-model還是存在一定的差別，如雖然我傳遞參數(shù)（v-xxx=’param’）是一個引用類型，數(shù)據(jù)變化時，并不能觸發(fā)指令的bind或者inserted，這是因為在指令的聲明周期內(nèi)，bind和inserted只是在初始化時調(diào)用一次，后面只會走update和componentUpdated。

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

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

四、小結(jié)

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

以上就是分析Vue指令實現(xiàn)原理的詳細內(nèi)容，更多關(guān)于Vue指令原理的資料請關(guān)注好吧啦網(wǎng)其它相關(guān)文章！