Vue实例的生命周期解析-优快云博客

本文详细探讨了Vue实例从创建到销毁的各个生命周期阶段，包括创建（实例）、载入（数据）、更新和销毁。在创建阶段，介绍了created和beforeMount的区别，以及在不同阶段可以进行的操作，如初始化数据和操作DOM。在载入阶段，讨论了beforeMount和mounted的时机，以及何时适合进行DOM操作。在更新阶段，阐述了beforeUpdate和updated的用途。最后，讲解了销毁前和销毁后的生命周期钩子，以及在何时可以进行资源清理。此外，还提供了一些常见的面试题及答案，帮助读者更好地理解和应用Vue的生命周期。

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

概念

借用官网的一句话就是：每一个vue实例从创建到销毁的过程，就是这个vue实例的生命周期。在这个过程中，他经历了从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程。
在这里插入图片描述

可以理解vue生命周期就是指vue实例从创建到销毁的过程，在vue中分为8个阶段：创建前/后，载入前/后，更新前/后，销毁前/后。

一、创建（实例）

1、beforeCreate：这个阶段实例已经初始化，只是数据观察与事件机制尚未形成，不能获取DOM节点（没有data，没有el）
使用场景：因为此时data和methods都拿不到，所以通常在实例以外使用
2、created：实例已经创建，仍然不能获取DOM节点（有data，没有el）
使用场景：模板渲染成html前调用，此时可以获取data和methods，so 可以初始化某些属性值，然后再渲染成视图，异步操作可以放在这里

二、载入（数据）

1、beforeMount：是个过渡阶段，此时依然获取不到具体的DOM节点，但是vue挂载的根节点已经创建（有data，有el）
2、mounted：数据和DOM都已经被渲染出来了
使用场景：模板渲染成html后调用，通常是初始化页面完成后再对数据和DOM做一些操作，需要操作DOM的方法可以放在这里

三、更新

1、beforeUpdate：检测到数据更新时，但在DOM更新前执行
2、updated：更新结束后执行
使用场景：需要对数据更新做统一处理的；如果需要区分不同的数据更新操作可以使用$nextTick

四、销毁

1、beforeDestroy：当要销毁vue实例时，在销毁前执行
2、destroyed：销毁vue实例时执行

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <p>{{message}}</p>
        <button @click="changeMsg">改变</button>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            message: 'hello world'
        },
        methods: {
            changeMsg () {
                this.message = 'goodbye world'
            }
        },
        beforeCreate() {
            console.log('------beforeCreate初始化前------')
            console.log(this.message)
            console.log(this.$el)
        },
        created () {
            console.log('------created初始化完成------')
            console.log(this.message)
            console.log(this.$el)
        },
        beforeMount () {
            console.log('------beforeMount挂载前---------')
            console.log(this.message)
            console.log(this.$el)
        },
        mounted () {
            console.log('------mounted挂载完成---------')
            console.log(this.message)
            console.log(this.$el)
        },
        beforeUpdate () {
            console.log('------beforeUpdate更新前---------')
            console.log(this.message)
            console.log(this.$el)
        },
        updated() {
            console.log('------updated更新后---------')
            console.log(this.message)
            console.log(this.$el)
        }
    })
</script>

</html>

打印的数据：
在这里插入图片描述

从上面我们可以看出几点，

首次，只执行了4个生命周期，beforeCreate，created, beforeMount, mounted。
created中，我们可以拿到data中的message数据了，因为初始化已经完成
beforeMount中，我们可以看出，我们拿到了$el，而mounted中，我们也拿到了$el，不过好像有点不一样是吧。一个好像是渲染前的，一个是渲染后的。对的。看过MVVM响应式原来或者Vue源码你们就会发现，最初其实我们是会去让this.$el = new Vue时传入的那个el的dom。所以在beforMount中，其实我们拿到的就是页面中的#app。而再继续往后，首先我们是不是没有找到render函数啊，也没有找到template啊，所以他会怎么做啊，是不是会把我们的这个el（#app）编译成template模板啊，再转换为render函数，最后将render函数渲染成为真实dom，渲染成真实dom后，我们是不是会用这个渲染出来的dom去替换原来的vm.$el啊。这也就是我们前面所说到的替换$el是什么意思了。
所以，在mounted中，我们所得到的渲染完成后的$el。

下面我们再看个例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <p>{{message}}</p>
        <button @click="changeMsg">改变</button>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            message: 'hello world'
        },
        template: '<div>我是模板内的{{message}}</div>',
        methods: {
            changeMsg () {
                this.message = 'goodbye world'
            }
        },
        beforeCreate() {
            console.log('------beforeCreate初始化前------')
            console.log(this.message)
            console.log(this.$el)
        },
        created () {
            console.log('------created初始化完成------')
            console.log(this.message)
            console.log(this.$el)
        },
        beforeMount () {
            console.log('------beforeMount挂载前---------')
            console.log(this.message)
            console.log(this.$el)
        },
        mounted () {
            console.log('------mounted挂载完成---------')
            console.log(this.message)
            console.log(this.$el)
        },
        beforeUpdate () {
            console.log('------beforeUpdate更新前---------')
            console.log(this.message)
            console.log(this.$el)
        },
        updated() {
            console.log('------updated更新后---------')
            console.log(this.message)
            console.log(this.$el)
        }
    })
</script>

</html>

我们在new Vue实例的时候直接传入了一个template，这时候我们再看输出
在这里插入图片描述
这么看是不是就很清晰了啊，在beforeMount的时候，$el还是#app，但是在mounted的时候就变成模板的div了，是不是因为我们传了个template啊，所以，他直接将这个template转换成render函数啦。再渲染成真实dom后，用渲染出来的真实dom替换了原来的$el。

面试题

什么是 vue 生命周期？有什么作用？

答：每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。（ps：生命周期钩子就是生命周期函数）例如，如果要通过某些插件操作DOM节点，如想在页面渲染完后弹出广告窗，那我们最早可在mounted 中进行。

created和mounted的区别

created：一般是在html渲染前的操作，此时el还是undefined，data已经存在。这里不能对dom进行操作。

mounted：一般是在html渲染完成后的操作，此时el，data都已经加载完成，一般对dom的操作都写在mounted中，例如获取innerHTML，初始化echarts的时候。

第一次页面加载会触发哪几个钩子？

答：beforeCreate， created， beforeMount， mounted

vue获取数据在哪个周期函数

答：一般 created/beforeMount/mounted 皆可。
比如如果你要操作 DOM , 那肯定 mounted 时候才能操作。

简述每个周期具体适合哪些场景

beforeCreate：在new一个vue实例后，只有一些默认的生命周期钩子和默认事件，其他的东西都还没创建。在beforeCreate生命周期执行的时候，data和methods中的数据都还没有初始化。不能在这个阶段使用data中的数据和methods中的方法
create：data 和 methods都已经被初始化好了，如果要调用 methods 中的方法，或者操作 data 中的数据，最早可以在这个阶段中操作
beforeMount：执行到这个钩子的时候，在内存中已经编译好了模板了，但是还没有挂载到页面中，此时，页面还是旧的
mounted：执行到这个钩子的时候，就表示Vue实例已经初始化完成了。此时组件脱离了创建阶段，进入到了运行阶段。如果我们想要通过插件操作页面上的DOM节点，最早可以在和这个阶段中进行
beforeUpdate：当执行这个钩子时，页面中的显示的数据还是旧的，data中的数据是更新后的，页面还没有和最新的数据保持同步
updated：页面显示的数据和data中的数据已经保持同步了，都是最新的
beforeDestory：Vue实例从运行阶段进入到了销毁阶段，这个时候上所有的 data 和 methods ，指令，过滤器 ……都是处于可用状态。还没有真正被销毁
destroyed：这个时候上所有的 data 和 methods ，指令，过滤器 ……都是处于不可用状态。组件已经被销毁了。