Vue生命周期

最新推荐文章于 2025-06-06 16:47:17 发布

__zhxd

最新推荐文章于 2025-06-06 16:47:17 发布

阅读量207

点赞数

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/m0_63836635/article/details/126620688

版权

vue 专栏收录该内容

8 篇文章

订阅专栏

什么是生命周期？

Vue实例从创建到销毁的过程称之为生命周期，在实例的每一个阶段都对应一个可操作的函数，这些函数叫做生命周期函数，Vue通常有8个生命周期函数，分别为，beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed。

首先，我们看一张图吧，是官方文档的图，相信大家都很熟悉~
在这里插入图片描述
下面通过代码演示Vue实例的生命周期：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js"></script>
</head>
<body>
    <div id="app">
        <h3>{{info}}</h3>
    </div>
    <script>
        let vm = new Vue({
            el: "#app",
            data() {
                return {
                    info: "Vue生命周期"
                }
            },
            beforeCreate() {
                console.group("---beforeCreate---")
                console.log(this.$el)
                console.log(this.$data)
                console.log(this.info)
            },
            created() {
                console.group("---create---")
                console.log(this.$el)
                console.log(this.$data)
                console.log(this.info)
            },
            beforeMount() {
                console.group("---beforeMount---")
                console.log(this.$el)
                console.log(this.$data)
                console.log(this.info)
            },
            mounted() {
                console.group("---mounted---")
                console.log(this.$el)
                console.log(this.$data)
                console.log(this.info)
            },
            beforeUpdate() {
                console.group("---beforeUpdate---")
                console.log(this.$el)
                console.log(this.$data)
                console.log(this.info)
            },
            updated() {
                console.group("---updated---")
                console.log(this.$el)
                console.log(this.$data)
                console.log(this.info)
            },
            beforeDestroy() {
                console.group("---beforeDestroy---")
                console.log(this.$el)
                console.log(this.$data)
                console.log(this.info)
            },
            destroyed() {
                console.group("---destroyed---")
                console.log(this.$el)
                console.log(this.$data)
                console.log(this.info)
            }
        })
    </script>
</body>
</html>

运行结果如下：
在这里插入图片描述
在Vue实例创建的过程中会自动触发四个生命周期函数（钩子）

beforeCreate：初始化生命周期、事件，但是代理还没有开始；这时无法通过Vue实例访问到data数据、methods中的方法
created：初始化数据监测、数据代理；此时已经可以访问到data中的数据和methods中的方法
在beforeCreate和created之间：进行事件初始化，数据代理，但是el选项还是没有
beforeMount：此阶段已经有el选项，但是页面呈现的是未经过Vue翻译的DOM结构，此时对DOM的操作都是无效的
在created和beforeMount之间：在这个过程发生的事情挺多，首先会判断Vue实例是否含有el选项，如果有则继续往下编译，如果没有el选项则停止编译，直到vue实例调用$mount(el)再往下编译；然后，就是是否含有template选项，如果有，则将其作为模板进行渲染，如果没有则把外部的HTML作为模板进行编译。通过代码查看：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js"></script>
</head>
<body>
    <div id="app">
        <h3>{{info}}外部HTML</h3>
    </div>
    <script>
        let vm = new Vue({
            el: "#app",
            data() {
                return {
                    info: "Vue生命周期"
                }
            },
            template:"<p>{{info}} -- template</p>"
        })
    </script>
</body>
</html>

结果如下：
在这里插入图片描述

6.mouted：页面中呈现的是经过Vue编译的DOM，至此初始化过程结束，可以进行开启定时器，发送网络请求、订阅信息、绑定自定义事件等初始化的操作
7.在beforeMount和mouted：将内存中虚拟DOM转换成真实DOM，把经过实例编译的模板替换掉原始的el选项的模板

更新info的值：

vm.info = "Vue更新值了"

在这里插入图片描述
8.beforeUpdate：data数据是新的，但是页面数据是旧的，此阶段页面和数据尚未保持同步
9.updated：页面和数据保持同步，页面和数据均是新的
10.在beforeUpdate和updated之间：根据新的数据，生成新的虚拟DOM，与旧的虚拟DOM进行比较，最后完成更新