vue父子组件挂载

版权声明：个人笔记，不喜勿喷 https://blog.csdn.net/qq_39571197/article/details/88895599

结论：子组件的完整生命周期，总是在父组件 beforeMount->mounted 之间完成。

渲染过程：

父组件先开始挂载，挂载途中遇到子组件递归执行渲染流程，

因为递归是同步的，只能等子组件渲染流程完成(mounted)，代码才能走到mounted钩子。

Watcher构造器

this.getter = updateComponent;

this.get(); // 准备依赖收集环境(栈的形式)，触发getter，完成收集依赖，删除依赖收集环境

回到updateComponent

一番寻找之后，原来核心还是render这块，因为整个渲染过程是同步的。

扫描二维码关注公众号，回复： 5765094 查看本文章

{new Vue()->_init() 
    
    
    callHook(vm, 'beforeCreate');
    // ...
    callHook(vm, 'created');

    { $mount()

        { mountComponent()
            callHook(vm, 'beforeMount');

            { render()  // 生成render函数

              _createElement()->createComponent()->installComponentHooks()->
              init()->createComponentInstanceForVnode() // 内部执行了VueComponent构造器
              
              /**
               * VueComponent继承自Vue，并且构造器中也执行了_init()方法
               * _init()->$mount()->mountComponent() 成递归状，闭环
               * 可以看到是 beforeMount->mounted 之间
               * 
               * 结论：子组件的完整生命周期，总是在父组件 beforeMount->mounted 之间完成
               */
              
            }

            new Watcher()->vm._render()->执行render函数
            
            callHook(vm, 'mounted');

         }

    }
}

不知道vue3是否会加入异步钩子机制。