一张图搞定Vue的生命周期

最新推荐文章于 2025-09-07 22:13:39 发布

转载最新推荐文章于 2025-09-07 22:13:39 发布 · 72 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://yq.aliyun.com/articles/656948

文章标签：

#javascript #ViewUI

博客介绍了Vue的生命周期及各个钩子函数的执行时间点。如beforecreated时el和data未初始化，created完成data初始化，beforeMount完成el和data初始化，mounted完成挂载。还提到数据修改触发update，组件销毁触发destroy相关钩子，销毁后DOM元素存在但不受Vue控制。

Vue的生命周期

life.png

life1.png

各个钩子函数的执行时间点：

<!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">
    <title>Title</title>
</head>
<body>
<div id="app">
    <p>{{message}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            message: "hello gaoxin!!"
        },
        beforeCreate: function () {
            console.group("beforeCreate  创建实例之前===========");
            console.log("el: " + this.$el); // undefined
            console.log("data: " + this.$data); // undefined
            console.log("message: " + this.message);
        },
        created: function () {
            console.group("Created:  创建实例完成===========");
            console.log("el: " + this.$el); // undefined
            console.log("data: " + 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("Destoryed  实例销毁之后");
            console.log("el: " + this.$el);
            console.log("data: " + this.$data);
            console.log("message: " + this.message);
        }
    })
</script>
</body>
</html>

执行上面代码，可以看到：
beforecreated ：el 和 data 并未初始化
created：完成了data数据的初始化 el 没有
beforeMount：完成了el 和 data的初始化
mounted：完成了挂载
也就是说挂载前的状态是虚拟DOM技术，先把坑站住了挂载之后才真正的把值渲染进去
data里的值被修改会出发update的操作
我们在浏览器console里执行命令：app.$destroy();
触发了destroy相关的钩子函数，也就是说组件被销毁,
更改message的值DOM中的值不变也就是说DOM元素依然存在只是不受vue控制了