vue父子组件挂载

 bug-删不掉。。

 

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

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

从Watcher构造器寻找

this.getter = updateComponent;

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

又回到了updateComponent

 

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

{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 之间完成
               * 或者说，从beforeMount开始挂载dom，直到所有子节点(原生、Vue)都挂载完成之后，
               * 组件才算挂载完成mounted
               */
              
            }

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

         }

    }
}

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

组件卸载

父->beforeDestroy

    子->beforeDestroy

    子->destroyed

父->destroyed

 

VM更新，父子需要使用props关联，否则各自更新各自的，看不到测试效果

父->beforeUpdate

    子->beforeUpdate

    子->updated

父->update