Vue嵌套组件创建和销毁的顺序

最新推荐文章于 2025-06-04 23:40:15 发布

perryhuan9

最新推荐文章于 2025-06-04 23:40:15 发布

阅读量1.1w

点赞数 4

CC 4.0 BY-SA版权

文章标签：前端Vue vue的生命周期 vue嵌套组件的创建顺序 vue vue vdom解读

本文链接：https://blog.youkuaiyun.com/huangyilinnuli/article/details/83929539

本文探讨了Vue中嵌套组件的创建、挂载和销毁顺序。在组件创建过程中，beforeCreate、created和beforeMount按照从外到内的顺序执行。然而，mounted的顺序与创建相反，从内到外进行，因为Vue需要先构建内部组件的虚拟DOM。在销毁过程中，遵循从内到外的顺序，先执行最内层组件的beforeDestroy和destroyed。

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

理解生命周期和钩子函数的调用在工程中十分重要，关于Vue生命周期的理解我推荐这一遍详解Vue生命周期。写得真不错，浅显易懂，任何初学者一看都能明白是怎么一回事。今天我当然不是来讲生命周期的，我要将的是嵌套组件的创建顺序，嵌套组件件钩子函数的执行顺序，最后是销毁顺序。闲话少说，直接上代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试Vue</title>
    <script src="js/vue.js"></script>

</head>
<body>
    <div id="app" style="border: 1px solid red;padding: 10px">
        <div >
            根组件
            <button @click="handleClick">根组件销毁</button>
        </div>
        <a-component></a-component>
        <b-component></b-component>
    </div>
    
    <script>
        Vue.component('a-component' , {
            template : `
                <div style="border:1px solid black;padding: 10px;margin: 10px">
                    组件A