快捷導(dǎo)航

Vue初始化中的選項(xiàng)合并之initInternalComponent詳解

更新時(shí)間：2020年06月11日 10:50:54 作者：FrankChencc

這篇文章主要介紹了Vue初始化中的選項(xiàng)合并之initInternalComponent的相關(guān)知識(shí)，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

今天給大家分享Vue初始化中的選項(xiàng)合并之initInternalComponent的相關(guān)知識(shí)，具體代碼如下所示：

export function initInternalComponent (vm: Component, options: InternalComponentOptions) {
 const opts = vm.$options = Object.create(vm.constructor.options)
 // doing this because it's faster than dynamic enumeration.
 const parentVnode = options._parentVnode
 opts.parent = options.parent
 opts._parentVnode = parentVnode

 const vnodeComponentOptions = parentVnode.componentOptions
 opts.propsData = vnodeComponentOptions.propsData
 opts._parentListeners = vnodeComponentOptions.listeners
 opts._renderChildren = vnodeComponentOptions.children
 opts._componentTag = vnodeComponentOptions.tag

 if (options.render) {
  opts.render = options.render
  opts.staticRenderFns = options.staticRenderFns
 }
}

initInternalComponent方法接受兩個(gè)參數(shù)，第一個(gè)參數(shù)是組件實(shí)例，即this。第二個(gè)參數(shù)是組件構(gòu)造函數(shù)中傳入的option，這個(gè)option根據(jù)上文的分析，他是在createComponentInstanceForVnode方法中定義的：

export function createComponentInstanceForVnode (
 vnode: any, // we know it's MountedComponentVNode but flow doesn't
 parent: any, // activeInstance in lifecycle state
): Component {
 const options: InternalComponentOptions = {
  _isComponent: true,
  _parentVnode: vnode,
  parent
 }
 // check inline-template render functions
 const inlineTemplate = vnode.data.inlineTemplate
 if (isDef(inlineTemplate)) {
  options.render = inlineTemplate.render
  options.staticRenderFns = inlineTemplate.staticRenderFns
 }
 return new vnode.componentOptions.Ctor(options)
}

option中有三個(gè)屬性值，_isComponent上面已經(jīng)提到過(guò)了；_parentVode其實(shí)就是該組件實(shí)例的vnode對(duì)象（createComponentInstanceForVnode就是根據(jù)這個(gè)vnode對(duì)象去創(chuàng)建一個(gè)組件實(shí)例）；parent則是該組件的父組件實(shí)例對(duì)象。
然后我們來(lái)看看具體initInternalComponent做了什么操作:

const opts = vm.$options = Object.create(vm.constructor.options)

首先，用Object.create這個(gè)函數(shù)，把組件構(gòu)造函數(shù)的options掛載到vm.$options的__proto__上。

const parentVnode = options._parentVnode
opts.parent = options.parent
opts._parentVnode = parentVnode

接下把傳入?yún)?shù)的option的_parentVode和parent掛載到組件實(shí)例$options上。用我們?cè)趦煞N策略里的那個(gè)例子來(lái)說(shuō)，parent就是我們組件的根實(shí)例，而_parentVnode就是<comp :msg="msg" @log-msg="logMsg"></comp>生成的一個(gè)Vnode對(duì)象。

const vnodeComponentOptions = parentVnode.componentOptions
opts.propsData = vnodeComponentOptions.propsData
opts._parentListeners = vnodeComponentOptions.listeners
opts._renderChildren = vnodeComponentOptions.children
opts._componentTag = vnodeComponentOptions.tag

然后把父組件里的vnode上的四個(gè)屬性掛載到我們的$options上，還是用那個(gè)例子來(lái)說(shuō)，propsData就是根據(jù):msg="msg"生成的，他的值就是在根組件里定義的那個(gè)msg{msg: "props-message"}。而_parentListeners就是根據(jù)@log-msg="logMsg"生成的，他的值是logMsg這個(gè)定義在父組件中的方法。

if (options.render) {
  opts.render = options.render
  opts.staticRenderFns = options.staticRenderFns
}

最后就是如果傳入的option中如果有render，把render相關(guān)的也掛載到$options上。
因此，這個(gè)initInternalComponent主要做了兩件事情：1.指定組件$options原型，2.把組件依賴于父組件的props、listeners也掛載到options上，方便子組件調(diào)用。

總結(jié)

到此這篇關(guān)于Vue初始化中的選項(xiàng)合并之initInternalComponent詳解的文章就介紹到這了,更多相關(guān)Vue初始化選項(xiàng)合并內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: