vue父子组件挂载

最新推荐文章于 2025-07-04 08:33:11 发布

[暂停使用]日行一善

最新推荐文章于 2025-07-04 08:33:11 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 前端

本文链接：https://blog.youkuaiyun.com/qq_39571197/article/details/88895599

前端同时被 2 个专栏收录

100 篇文章

订阅专栏

vue

10 篇文章

订阅专栏

本文解析了Vue.js中组件的生命周期，重点介绍了组件从挂载到渲染的过程，包括递归渲染、依赖收集、watcher机制等内容。此外，还探讨了组件卸载及更新时的钩子调用顺序。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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是否会加入异步钩子机制。