Vue指令工作原理實現方法
簡介
現在的大前端時代,是一個動盪紛爭的時代,江湖中已經分成了很多門派,主要以Vue,React還有Angular為首,形成前端框架三足鼎立的局勢。Vue在前端框架中的地位就像曾經的,由於其簡單易懂、開發效率高,已經成為了前端工程師必不可少的技能之一。
Vue是一種漸進式框架,完美融合了第三方外掛和UI元件庫,它和jQuery最大的區別在於,Vue無需開發人員直接操作DOM節點,就可以改變頁面渲染內容,在應用開發者具有一定的HTML、、Script的基礎上,能夠快速上手,開發出優雅、簡潔的應用程式模組。
前言
自定義指令是 vue 中使用頻率僅次於元件,其包含 bind
、 inserted
update
、 componentUpdated
、 unbind
五個生命週期鉤子。本文將對 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>
指令工作原理
初始化
初始化全域性 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) { // ... } }
模板編譯
模板編譯就是解析指令引數,具體解構後的 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: "" } ],// ... }
生成渲染方法
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 } } })]) }
生成VNode
vue 的指令設計是方便我們操作 DOM,在生成 VNode 時,指令並沒有做額外處理。
生成真實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.dwww.cppcns.comata.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)
}
}
}
}
對於首次建立,執行過程如下:
- oldVnode === emptyNode ,
isCreate
為 true ,呼叫當前元素中所有 bind 鉤子方法。 - 檢測指令中是否存在
inserted
鉤子,如果存在,則將 insert 鉤子合併到VNode.data.hooks
屬性中。 - DOM 掛載結束後,會執行
invokeInsertHook
,所有已掛載節點,如果VNode.data.hooks
中存在 insert 鉤子。則會呼叫,此時會觸發指令繫結的 客棧insertehttp://www.cppcns.comd 方法。
一般首次建立只會走 bind
和 inserted
方法,而 update
和 componentUpdated
則與 bind 和 inserted 對應。在元件依賴狀態發生改變時,會用 VNode diff
演算法,對節點進行打補丁式更新,其呼叫流程:
- 響應式資料發生改變,呼叫 dep.notify ,通知資料更新。
- 呼叫 patchVNode ,對新舊 VNode 進行差異化更新,並全量更新當前 VNode 屬性(包括指令,就會進入 updateDirectives 方法)。
- 如果指令存在 update 鉤子方法,呼叫 update 鉤子方法,並初始化
componentUpdated
回撥,將 postpatch hooks 掛載到VNode.data.hooks
中。 - 當前節點及子節點更新完畢後,會觸發
postpatch hooks
,即指令的 componentUpdated 方法
核心程式碼如下:
// src/core/vdom/patch.js function patchVnode ( oldVnode,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
,如果指令需要依賴於子元件的內容時,推薦在 componentUnpdated 中寫相應業務邏輯。
vue 中,很多方法都是迴圈呼叫,如 hooks 方法,事件回撥等,一般呼叫都用 try catch 包裹,這樣做的目的是為了防止一個處理方法報錯,導致整個程式崩潰,這一點在我們開發過程中可以借鑑使用。
小結
開始看整個 vue 原始碼時,對很多細枝末節方法都不怎麼了解,通過梳理具體每個功能的實現時,漸漸能夠看到整個 vue 全貌,同時也能避免開發使用中的一些坑點。
以上就是Vue指令工作原理實現方法的詳細內容,更多關於Vue指令原理的資料請關注我們其它相關文章!