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

来源:3-6 合并配置(上)

慕先生4328837

2022-06-13

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
  1. 为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跳过了占位节点,直接生成了渲染节点

写回答

1回答

慕先生4328837

提问者

2022-06-13

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

0
1
ustbhuangyi
参考这个类似的回答 https://coding.imooc.com/learn/questiondetail/RQyZ06gV1JGXe459.html
2022-06-16
共1条回复

Vue.js 源码深入解析 深入理解Vue实现原理

全方位讲解 Vue.js 源码,进阶高级工程师

4986 学习 · 1038 问题

查看课程