Vue的生命周期

Posted 2021-01-16 jiadi321

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue的生命周期相关的知识，希望对你有一定的参考价值。

vue生命周期简介

技术分享图片

生命周期的钩子 LifeCycle hooks

技术分享图片

上面已经能够清晰的看到vue2.0都包含了哪些生命周期的钩子函数~~

那么执行顺序以及什么时候执行，我们上代码来看~~~

<!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>