Vue的生命周期（8个钩子函数）

最新推荐文章于 2025-04-28 17:57:04 发布

啊sen丶

最新推荐文章于 2025-04-28 17:57:04 发布

阅读量2.5k

点赞数 78

文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/2201_75353178/article/details/145995379

版权

Vue的生命周期钩子函数是 Vue 实例在不同阶段自动调用的函数，允许开发者在特定时刻执行自定义逻辑。

简单说明

下面图片对每个钩子函数做了简单的说明：

这些钩子函数帮助开发者在 Vue 实例的不同阶段执行相应操作，提升应用的可控性和可维护性。

代码具体介绍

下面我将通过代码来具体展现了8个钩子函数实际的作用。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h1>{{ message }}</h1>
    <button @click="handleClick">修改</button>
</div>
</body>
</html>
<script src="../js/vue2.7.16.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello'
        },
        methods: {
            handleClick() {
                this.message = "你好";
            }
        },

首先我定义了一个 id 为 app 的 <div>，这个区域是 Vue 实例操作的范围。

定义一个h1标签来显示 Vue 实例中的message 响应式数据。

在下方定义了一个按钮，绑定了一个点击事件，点击时会调用 handleClick 方法。

在script中，我把message 数据初始值设置为“Hello”，并设置了一个handleClick方法用来修改

message响应式数据的值，当点击按钮时会把“Hello”修改成“你好”。

一、生命周期第1组

        beforeCreate () {
            console.log('生命周期第1组: 响应式数据创建前',this.message)
        },
        created () {
            console.log('生命周期第1组: 响应式数据创建后',this.message)
        },

1、beforeCreate：

在实例初始化之后，data 和 methods 还未初始化，因此 this.message 为 undefined。

此时 Vue 实例还未准备好，主要用于初始化一些全局配置。

2、created：

在实例创建完成后调用，data 和 methods 已初始化，但页面 DOM 还未渲染。

此时可以进行一些数据初始化操作，但不能操作 DOM。

打开后台console查看输出结果：

二、生命周期第2组

        beforeMount(){
            console.log('生命周期第2组: 挂载前视图数据',document.querySelector('h1').innerHTML);
        },
        mounted(){
            console.log('生命周期第2组: 挂载后视图数据',document.querySelector('h1').innerHTML);
        },

1、beforeMount：

在挂载开始之前调用，此时 render 函数首次被调用（返回虚拟 DOM ，但尚未将其挂载到真实的 DOM 上）。

页面 DOM 还未被 Vue 替换，document.querySelector('h1').innerHTML 会打印原始模板内容。

2、mounted：

在实例挂载完成后调用，此时页面 DOM 已被渲染完成。

可以操作 DOM，适合进行 DOM 相关的初始化操作，如绑定第三方库。

打开后台console查看输出结果：

三、生命周期第3组

        beforeUpdate(){
            console.log('生命周期第3组 :视图数据修改前响应式数据:',this.message,'视图数据修改前视图数据:',document.querySelector('h1').innerHTML);
        },
        updated(){
            console.log('生命周期第3组: 视图数据修改后响应式数据:',this.message,'视图数据修改后视图数据:',document.querySelector('h1').innerHTML);
        },

1、beforeUpdate：

在数据更新时调用，发生在虚拟 DOM 打补丁之前。

此时 this.message 已更新为新值，但视图还未更新。

2、updated：

在数据更新后调用，发生在虚拟 DOM 重新渲染和打补丁之后。

此时视图已更新，适合进行 DOM 操作或重新计算布局。

点击按钮后，打开后台console查看输出结果：

四、生命周期第4组

        beforeDestroy() {
            console.log('生命周期第4组: Vue实例销毁前');
        },
        destroyed() {
            console.log('生命周期第4组: Vue实例销毁后');
        }

1、beforeDestroy：

在实例销毁之前调用，此时实例仍然完全可用。

可以在此处清理定时器、取消事件监听等。

2、destroyed：

在实例销毁后调用，此时 Vue 实例的所有绑定和子实例都被销毁。

通常用于确认实例已完全销毁。

在后台console输入app.$destory()后，查看输出结果：

整体console输出顺序（已点击修改按钮）：

相关代码已上传