App中引入HelloWorld子组件, 在HelloWorld中$parent为什么指向了App, 而不是HelloWorld的占位符实例

Question

App中引入HelloWorld子组件, 在HelloWorld中$parent为什么指向了App, 而不是HelloWorld的占位符实例。是HelloWorld跳过了占位符vnode直接生成了渲染vnode么

// core/instance/lifecycle.js
export function initLifecycle (vm: Component) {
  const options = vm.$options
  let parent = options.parent
  vm.$parent = parent
}

1. 将app经过render生成占位节点挂载, vm是Vue实例, vm.parent是undefined

• new Vue({render: h => h(App)}).$mount('#app') vm是new Vue
• init-> initLifecycle() {vm.$parent = parent} vm.parent是undefined
• render(生成占位符vnode)
• update(vnode/*占位节点*/, hydrating), 设置activeInstance为vm
• patch (oldVnode /*div #app*/, vnode /*占位符vnode*/, hydrating, removeOnly) -
• createComponent(vnode, insertedVnodeQueue, parentElm, refElm), 调用init, 生成componentInstance

2. 为app占位节点生成componentInstance, vm是child, vm.parent是上次激活的Vue实例, 接着走_init和$mount。

是否代表组件渲染成真实的dom, 需要走俩次mount,一次是挂载占位节点,一次是挂载渲染节点

在我设想中, 应该有4次mount即4次_update：App的占位节点和渲染节点以及HelloWorld的占位节点和渲染节点。debbuger时只调用了3次mount。我猜测是只有createComponentInstance才会走mount, 一次初始化+2次createComponentInstance故而三次, 占位节点不会走mount。但是这样的话$parent也还是HelloWorld的占位节点呀。我看断点好像是HelloWorld跳过了占位节点,直接生成了渲染节点

Answer 1

提问者 慕先生4328837 2022-06-13 19:56:27

是生成HelloWorld占位节点时,vm仍是appComponentInstance么, 或者父子组件中做了什么操作, 或者让把占位符vnode的一些属性赋值给了渲染vnode么

• ustbhuangyi #1

  参考这个类似的回答 https://coding.imooc.com/learn/questiondetail/RQyZ06gV1JGXe459.html