您好,登錄后才能下訂單哦!
今天小編給大家分享一下Vue2之initRender與callHook組件怎么應(yīng)用的相關(guān)知識點,內(nèi)容詳細(xì),邏輯清晰,相信大部分人都還太了解這方面的知識,所以分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后有所收獲,下面我們一起來了解一下吧。
在 initEvents 事件系統(tǒng)初始化完成之后,緊接著的就是組件實例的渲染部分的初始化 initRender。
initRender 函數(shù)定義位于 src/core/instance/render.ts 文件內(nèi),基本定義如下:
export function initRender(vm: Component) { vm._vnode = null vm._staticTrees = null const options = vm.$options const parentVnode = (vm.$vnode = options._parentVnode!) const renderContext = parentVnode && (parentVnode.context as Component) vm.$slots = resolveSlots(options._renderChildren, renderContext) vm.$scopedSlots = parentVnode ? normalizeScopedSlots(vm.$parent!, parentVnode.data!.scopedSlots, vm.$slots) : emptyObject vm._c = (a, b, c, d) => createElement(vm, a, b, c, d, false) vm.$createElement = (a, b, c, d) => createElement(vm, a, b, c, d, true) const parentData = parentVnode && parentVnode.data if (__DEV__) { defineReactive( vm, '$attrs', (parentData && parentData.attrs) || emptyObject, () => !isUpdatingChildComponent && warn(`$attrs is readonly.`, vm), true ) defineReactive( vm, '$listeners', options._parentListeners || emptyObject, () => !isUpdatingChildComponent && warn(`$listeners is readonly.`, vm), true ) } else { // 將 defineReactive 的第四個參數(shù)設(shè)為 null 重新執(zhí)行上面的步驟,即省略校驗和報錯部分 } }
這部分其實比較好理解:
首先是 清空 組件的 VNode 對象和靜態(tài)dom節(jié)點樹;并獲取到該實例的 父組件虛擬dom樹對象 parentVnode 與 父組件實例指向 renderContext
然后是處理 當(dāng)前組件的 slots 插槽對象 ,以及標(biāo)準(zhǔn)化處理組件的數(shù)據(jù)域插槽
給組件添加兩個 組件創(chuàng)建方法,但是這兩個方法有細(xì)微差別:
_c 表示使用內(nèi)部 render 函數(shù),不需要額外的標(biāo)準(zhǔn)化處理
$createElement 則表示使用的是用戶自己編寫的 render 函數(shù),需要內(nèi)部重新進行一次標(biāo)準(zhǔn)化處理
這兩個方法最終其實都是調(diào)用的 _createElement 方法,只是標(biāo)準(zhǔn)函數(shù)(即 _c)使用 simpleNormalizeChildren() 處理,而用戶自定義 render (即 $createElement)使用 normalizeChildren() 處理
最后對 attrs∗∗和∗∗attrs** 和 **attrs∗∗和∗∗listeners 進行響應(yīng)式處理。這一步主要是為了提供給高階組件使用,當(dāng)使用 attrs∗∗和∗∗attrs** 和 **attrs∗∗和∗∗listeners 進行綁定數(shù)據(jù)與事件透傳時,可以正確觸發(fā)高階組件內(nèi)部的狀態(tài)更新。
整個過程其實就是解析了組件的 options 配置項與父組件的綁定參數(shù),并對插槽和數(shù)據(jù)域插槽進行不同處理,最后給組件添加 _createElement 的事件指向綁定,并響應(yīng)式處理兩個組件內(nèi)部沒有直接定義的參數(shù)/事件。
因為這部分篇幅較少,所以把 callHook() 方法也一并看了。
這個方法從名字上就可以看出,是用來觸發(fā)生命周期鉤子的回調(diào)函數(shù)。在之前的 mergeOptions 配置合并 中已經(jīng)知道,Vue 組件在實例化的時候會對 options 中的生命周期鉤子函數(shù)定義進行標(biāo)準(zhǔn)化處理,最后每個生命周期對應(yīng)的都是一個 函數(shù)數(shù)組(如果有定義了鉤子函數(shù)的話)。
該方法的定義如下:
export function callHook(vm: Component, hook: string, args?: any[], setContext = true) { pushTarget() const prev = currentInstance setContext && setCurrentInstance(vm) const handlers = vm.$options[hook] const info = `${hook} hook` if (handlers) { for (let i = 0, j = handlers.length; i < j; i++) { invokeWithErrorHandling(handlers[i], vm, args || null, vm, info) } } if (vm._hasHookEvent) { vm.$emit('hook:' + hook) } setContext && setCurrentInstance(prev) popTarget() }
這里可以分成一下幾步來理解:
pushTarget() :在組件的 Dep 依賴中插入一個 undefined 元素并將當(dāng)前依賴指向設(shè)置為 undefined,來禁止生命周期鉤子函數(shù)執(zhí)行時的依賴收集
遍歷 options 中對應(yīng)的鉤子函數(shù)數(shù)組,調(diào)用 invokeWithErrorHandling 來執(zhí)行(這里其實與 initEvnets 中注冊組件事件的方法是一致的)
如果 _hasHookEvent 為 true,即父組件有設(shè)置子組件的生命周期監(jiān)聽函數(shù),則用 $emit 拋出對應(yīng)生命周期事件
popTarget() :刪除之前插入的 undefined 元素,并恢復(fù) Dep 依賴對象中的依賴收集效果
兩個 setCurrentInstance:這部分則是為了適配 V3 的寫法而新增的部分,主要是保證在生命周期的鉤子函數(shù)中使用 getCurrentInstance() 方法獲取當(dāng)前組件實例時能正確獲取到當(dāng)前的組件狀態(tài),但是在鉤子函數(shù)執(zhí)行完之后會恢復(fù)到之前的狀態(tài)
以上就是“Vue2之initRender與callHook組件怎么應(yīng)用”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家閱讀完這篇文章都有很大的收獲,小編每天都會為大家更新不同的知識,如果還想學(xué)習(xí)更多的知識,請關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。