vue生命周期以及父子组件生命周期函数的执行顺序

最新推荐文章于 2025-04-02 07:51:43 发布

故事只若初见

最新推荐文章于 2025-04-02 07:51:43 发布

阅读量274

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/qq_45424679/article/details/127248101

版权

本文详细介绍了Vue组件的8个生命周期函数，包括beforeCreate、created、beforeMount、mounted等，以及在不同场景如创建、更新、销毁时的执行顺序。同时，探讨了父子组件生命周期函数的交互，解析了在数据更新和销毁过程中父子组件的钩子调用顺序。

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

1.vue的8个生命周期函数
beforecreate(创建前)在这一阶段开始处理实例的data，计算属性，方法，watch监听属性等配置
2.created(创造后)在这一阶段实例的计算属性，方法，watch监听属性等已经配置完成，但是组件还没有被挂载
3.beforeMount（挂载前）组件开始挂载到页面上。
4.mouted（挂载后）组件挂载已经完成，可以在此进行ajax请求，浏览器中已经含有组件的dom结构，这也是最早可以操作dom的阶段。
5.beforeUpdate（更新前）当组件中进行数据更新时触发，此时data已经更新，但是页面中与data相关的dom还没更新。
6.updated（更新后）此时已经根据最新的data，完成了页面的更新。
7.beforeDestroy（销毁前）组件准备开始销毁工作，但仍可以正常工作的阶段。
8.destroyed（销毁后）组件已经销毁完毕。
组件初次加载的执行顺序
当组件第一次被加载时，会触发beforecreate（创造前）created（创造后）beforeMount（挂载前） mouted（挂载后）四个钩子函数（生命周期函数）
组件更新时生命周期函数的执行顺序
当组件更新时，触发的钩子函数为 beforeUpdate --> updated

组件销毁时生命周期函数执行顺序
当组件销毁时，触发的钩子函数为 beforeDestroy —> destoryed

父子组件的生命周期函数
父子组件第一次加载时触发的生命周期函数以及执行顺序
创建两个组件，并加入以下代码
父组件//父组件创造前
beforeCreate() {
console.log(“父组件正在被创造”);
},
//父组件创造后
created() {
console.log(“父组件已经创造”);
},
//父组件挂载前
beforeMount() {
console.log(“父组件正在被挂载”);
},
//父组件挂载后
mounted() {
console.log(“父组件已经挂载”);
},
//父组件更新前
beforeUpdate() {
console.log(“父组件正在被更新”);
},
//父组件更新后
updated() {
console.log(“父组件已经被更新”);
},
//父组件销毁前
beforeDestroy() {
console.log(“父组件正在被销毁”);
},
//父组件销毁后
destroyed() {
console.log(“父组件已经被销毁”);
},
子组件
//子组件创造前
beforeCreate() {
console.log(“子组件正在被创造”);
},
//子组件创造后
created() {
console.log(“子组件已经创造”);
},
//子组件挂载前
beforeMount() {
console.log(“子组件正在被挂载”);
},
//子组件挂载后
mounted() {
console.log(“子组件已经挂载”);
},
//子组件更新前
beforeUpdate() {
console.log(“子组件正在被更新”);
},
//子组件更新后
updated() {
console.log(“子组件已经被更新”);
},
//子组件销毁前
beforeDestroy() {
console.log(“子组件正在被销毁”);
},
//子组件销毁后
destroyed() {
console.log(“子组件已经被销毁”);
},
运行代码后发现控制台输出以下结果
在这里插入图片描述
由此可以发现执行顺序是
父beforeCreate --> 父caeated --> 父beforeMount --> 子beforeCreate --> 子created --> 子beforeMount --> 子mounted -->父mounted
父子组件更新时触发的声明周期函数以及执行顺序
给父组件添加一个data,然后定义一个按钮，点击后a+1
data() {
return {
a: 1,
};
},
在这里插入图片描述
由此看出父子组件数据更新时钩子函数执行顺序为
父beforeUpdate --> 子beforeUpdate --> 子updated --> 父updated

父子组件销毁时触发的生命周期函数执行顺序
父beforeDestroy --> 子beforeDestroy --> 子destroyed --> 父destroyed

生命周期方法详解
钩子函数详情场景备注
beforeCreate 实例初始化之后，组件被创建时期，这个时候的 el，data，message 都是 underfined 可以加入 loading 事件；在服务器端的应用场景中，这个时候发送数据请求比较多一些
created 实例创建完成后，data、methods 被初始化结束 loading 事件；推荐这个时候发送请求数据，尤其是返回的数据与绑定事件有关时
beforeMount 挂载初始之前，完成 el 初始化，render 被初次调用也可以发送数据请求在服务器端渲染期间不会被调用
mounted 完成挂载获取 el 中 DOM 元素，进行 DOM 操作；如果返回的数据操作依赖 DOM 完成，推荐这个时候发送数据请求在服务器端渲染期间不会被调用
beofreUpdate 挂载开始之前调用挂载完成之前访问现有 DOM ，比如手动移除已添加的事件监听器；也可以进一步修改数据在服务器渲染期间不会被调用，只有初次渲染会在服务端调用
updated 由于数据更改，重新渲染界面时调用可执行依赖于 DOM 的操作服务器端渲染期间不会被调用
activated keep-alive 组件激活时调用服务器端渲染期间不会被调用
deactivated 组件停用时调用服务器端渲染期间不会被调用
beforeDestroy 实例销毁之前调用删除钱发出确认信息；清理定时器服务器端渲染期间不会被调用
destroyed 实例销毁后调有。调用后，所有东西都会被解绑，所有的事件监听器会被移动，子实例也会被销毁提示已删除服务器端渲染期间不会被调用
errorCaptured 当捕获一个来自子孙组件的错误时被调用。收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。可返回 false 以阻止该错误继续向上传播。修改组件状态 2.5.0新增

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="UTF-8">
    <script type="text/javascript" src="https://cdn.jsdelivr.net/vue/2.1.3/vue.js"></script>
</head>
<body>

<div id="app">
    <p>{{ message }}</p>
    <button v-on:click="change()">change</button>
    <button v-on:click="destr()">destroy</button>
</div>

<script type="text/javascript">

    var app = new Vue({
        el: '#app',
        data: {
            message: 66
        },
        beforeCreate: function () {
            console.group('beforeCreate 创建前');
            console.log("el: " + this.$el);
            console.log("data: " + this.$data);
            console.log("message: " + this.message)
        },
        created: function () {
            console.group('created 创建完毕');
            console.log("el: " + this.$el);
            console.log("data: " + this.$data + JSON.stringify(this.$data));
            console.log("message: " + this.message)
        },
        beforeMount: function () {
            console.group('beforeMount 挂载前');
            console.log("el: " + this.$el);
            console.log("data: " + this.$data);
            console.log("message: " + this.message)
        },
        mounted: function () {
            console.group('mounted 挂载结束');
            console.log("el: " + this.$el);
            console.log("data: " + this.$data);
            console.log("message: " + this.message)
        },
        beforeUpdate: function () {
            console.group('beforeUpdate 更新前');
            console.log("el: " + this.$el);
            console.log("data: " + this.$data);
            console.log("message: " + this.message)
        },
        updated: function () {
            console.group('updated 更新完成');
            console.log("el: " + this.$el);
            console.log("data: " + this.$data);
            console.log("message: " + this.message)
        },
        beforeDestroy: function () {
            console.group('beforeDestroy 销毁前');
            console.log("el: " + this.$el);
            console.log("data: " + this.$data);
            console.log("message: " + this.message)
        },
        destroyed: function () {
            console.group('destroyed 销毁完成');
            console.log("el: " + this.$el);
            console.log("data: " + this.$data);
            console.log("message: " + this.message)
        },
        methods: {
            change() {
                app.message++;
            },
            destr() {
                app.$destroy();
            }
        }
    })
</script>
</body>
</html>