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
}
- 将app经过render生成占位节点挂载, vm是Vue实例, vm.parent是undefined
new Vue({render: h => h(App)}).$mount('#app')vm是new Vueinit->initLifecycle() {vm.$parent = parent}vm.parent是undefinedrender(生成占位符vnode)update(vnode/*占位节点*/, hydrating), 设置activeInstance为vmpatch (oldVnode /*div #app*/, vnode /*占位符vnode*/, hydrating, removeOnly)-createComponent(vnode, insertedVnodeQueue, parentElm, refElm), 调用init, 生成componentInstance
- 为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么
012022-06-16
相似问题