分析Vue指令實現(xiàn)原理
一、基本使用
官網(wǎng)案例:
<div id='app'> <input type="text" v-model="inputValue" v-focus> </div> <script> Vue.directive('focus', { // 第一次綁定元素時調(diào)用 bind () { console.log('bind') }, // 當被綁定的元素插入到 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é)點相對應的hooks方法,在DOM的創(chuàng)建(create)、激活(avtivate)、更新(update)、移除(remove)、銷毀(destroy)過程中,分別會輪詢調(diào)用對應的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轉(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的指令設計是方便我們操作DOM,在生成VNode時,指令并沒有做額外處理。
2.5、生成真實DOM
在vue初始化過程中,我們需要記住兩點:
- 狀態(tài)的初始化是 父 -> 子,如beforeCreate、created、beforeMount,調(diào)用順序是 父 -> 子
- 真實DOM掛載順序是 子 -> 父,如mounted,這是因為在生成真實DOM過程中,如果遇到組件,會走組件創(chuàng)建的過程,真實DOM的生成是從子到父一級級拼接。
在patch過程中,每此調(diào)用createElm生成真實DOM時,都會檢測當前VNode是否存在data屬性,存在,則會調(diào)用invokeCreateHooks,走初創(chuàng)建的鉤子函數(shù),核心代碼如下:
// src/core/vdom/patch.js function 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, unbind callHook(oldDirs[key], 'unbind', oldVnode, oldVnode, isDestroy) } } } }
對于首次創(chuàng)建,執(zhí)行過程如下:
1.oldVnode === emptyNode,isCreate為true,調(diào)用當前元素中所有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對應。在組件依賴狀態(tài)發(fā)生改變時,會用VNode diff算法,對節(jié)點進行打補丁式更新,其調(diào)用流程:
1.響應式數(shù)據(jù)發(fā)生改變,調(diào)用dep.notify,通知數(shù)據(jù)更新。
2.調(diào)用patchVNode,對新舊VNode進行差異化更新,并全量更新當前VNode屬性(包括指令,就會進入updateDirectives方法)。
3.如果指令存在update鉤子方法,調(diào)用update鉤子方法,并初始化componentUpdated回調(diào),將postpatch hooks掛載到VNode.data.hooks中。
4.當前節(jié)點及子節(jié)點更新完畢后,會觸發(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é)點的屬性 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è)務邏輯。
vue中,很多方法都是循環(huán)調(diào)用,如hooks方法,事件回調(diào)等,一般調(diào)用都用try catch包裹,這樣做的目的是為了防止一個處理方法報錯,導致整個程序崩潰,這一點在我們開發(fā)過程中可以借鑒使用。
四、小結(jié)
開始看整個vue源碼時,對很多細枝末節(jié)方法都不怎么了解,通過梳理具體每個功能的實現(xiàn)時,漸漸能夠看到整個vue全貌,同時也能避免開發(fā)使用中的一些坑點。
以上就是分析Vue指令實現(xiàn)原理的詳細內(nèi)容,更多關于Vue指令原理的資料請關注腳本之家其它相關文章!
相關文章
vue項目element?UI?版本升級過程遇到的問題及解決方案
這篇文章主要介紹了vue項目element?UI?版本升級過程遇到的問題及解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-01-01為vue-router懶加載時下載js的過程中添加loading提示避免無響應問題
這篇文章主要介紹了為vue-router懶加載時下載js的過程中添加loading提示避免無響應問題,需要的朋友可以參考下2018-04-04Vue自定義表單驗證(rule,value,callback)使用詳解
這篇文章主要介紹了Vue自定義表單驗證(rule,value,callback)使用詳解,今天我們講一講自定義驗證規(guī)則具體使用場景和它的三個參數(shù)意思和使用,需要的朋友可以參考下2023-07-07uniapp微信小程序WebApi_openid、phone接口獲取代碼詳解
本文主要記錄了微信小程序接口調(diào)用的過程,首先查看uniapp文檔和微信API文檔,獲取openid和phone,然后通過uniapp實現(xiàn)獲取openid和電話號碼,但遇到了合法域名屏蔽的問題,最后通過將微信訪問遷移到后臺解決,需要的朋友可以參考下2024-10-10Vue中import與@import的區(qū)別及使用場景說明
這篇文章主要介紹了Vue中import與@import的區(qū)別及使用場景說明,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-06-06Vue路由跳轉(zhuǎn)方式區(qū)別匯總(push,replace,go)
vue項目中點擊router-link標簽鏈接都屬于聲明式導航。vue項目中編程式導航有this.$router.push(),this.$router.replace(),this.$router.go()???????。這篇文章主要介紹了Vue路由跳轉(zhuǎn)方式區(qū)別匯總(push,replace,go)2022-12-12