Vue生命周期详解

最新推荐文章于 2026-03-05 00:22:13 发布

原创最新推荐文章于 2026-03-05 00:22:13 发布 · 455 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

结构清晰

面试可能碰到

面试

本文深入讲解Vue的生命周期，包括创建阶段、运行阶段和销毁阶段。在创建阶段，介绍了beforeCreate和created等钩子，以及如何利用debugger进行调试。运行阶段涉及beforeUpdate和updated，解释了数据更新到界面同步的过程。最后探讨了销毁阶段的beforeDestroy和destroyed，说明实例何时不可用。

在这里插入图片描述

Vue生命周期详解：

一. Vue生命周期介绍

生命周期的含义：从Vue实例创建，运行，到销毁期间，总是伴随着各种各样的事件，这些时间统称为生命周期

常见叫法：生命周期钩子 == 生命周期函数 == 生命周期事件

1.1 创建阶段

beforeCreate：实例刚在内存中创建出来，还没有初始化 data和 methods，只包含一些自带额生命周期函数
created：实例已经在内存中创建完成，此时data和methods已经创建完成
beforeMount：此时已经完成了模版的编译，只是还没有渲染到界面中去
mounted：模版已经渲染到了浏览器，创建阶段结束，即将进入运行阶段

创建阶段生命周期Demo：

我们可以通过在代码中添加 debugger 关键字来达到断点调试的功能，每一个debugger就相当于一个断点
添加断点调试后，我们可以查看每一个生命周期阶段的数据变化以及查看浏览器渲染时间
可以通过断点调试调用栈的调用过程，来学习Vue源码：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>vue-Demo</title>
    <script src="https://unpkg.com/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>
    <div id="app">
        <p>{{message}}</p>
    </div>
    <script type="text/javascript">
        var v = new Vue( {
            el: "#app",
            data: {
                message: "hello world!"
            },
            // 如果没有template,则会将el中元素当作template，如果有template，则会覆盖el中的dom
            template: "<div id='app'><h1>{{ message }}</h1></div>",
            // Vue实例刚刚被初始化，data和methods还没有值
            beforeCreate() {
                console.log( '1. beforeCreate=====' + this.message )
                debugger
            },
            // Vue实例创建完成，data和methods可以被使用了
            created() {
                console.log( '2. created=====' + this.message )
                debugger
            },
            // 内存中的Dom已经渲染完成，还没有显示到浏览器
            beforeMount() {
                console.log( '3. beforeMount=====' + this.message )
                debugger
            },
            //模版已经渲染到浏览器，创建阶段结束
            mounted() {
                debugger
                console.log( '4. mounted=====' + this.message )
            }
        } )
    </script>
</body>

</html>

运行结果为：
在这里插入图片描述

1.2运行阶段

beforeUpdate：界面中的数据还是旧的，但是data数据已经更新，页面中和data还没有同步
中间处理过程（非生命周期，便于学习抽象化的中间处理过程）：
先根据data中的数据，在内存中渲染出一个新的DOM，当新的DOM树更新之后，会重新渲染到真实的界面中去，从而实现了从
数据层（model）—》视图层（view）的转换
updated：页面重新渲染完毕，页面中的数据和data保持一致

运行阶段Demo：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>vue-Demo</title>
    <script src="https://unpkg.com/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>
    <div id="app">
        <p>{{message}}</p>
    </div>
    <script type="text/javascript">
        var vm = new Vue( {
            el: "#app",
            data: {
                message: "hello world!"
            },
            // 如果没有template,则会将el中元素当作template，如果有template，则会覆盖el中的dom
            template: "<div id='app'><h1>{{ message }}</h1></div>",
            beforeCreate() {
                console.log( '1. beforeCreate=====' + this.message )
            },
            created() {
                console.log( '2. created=====' + this.message )
            },
            beforeMount() {
                console.log( '3. beforeMount=====' + this.message )
            },
            mounted() {
                console.log( '4. mounted=====' + this.message )
            },
            beforeUpdate () {
                console.log("此时的message已经更新，但是浏览器页面上的数据没有发生变化",this.message)
                // 修改数据之后，添加断点，页面上的数据和当前message不一致
                debugger
            },
            updated () {
                console.log("更新结束，页面数据已更新")
            }
        } )
        // 在修改数据之前，添加断点
        debugger
        vm.message = '你好，Vue生命周期的运行阶段'
    </script>
</body>

</html>