Vue生命週期

vue生命週期簡介

生命週期的鉤子 LifeCycle hooks

上面已經可以清晰的看到vue2.0都包含了哪些生命週期的鉤子函數~~html

那麼執行順序以及何時執行，咱們上代碼來看~~~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">
    <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>

生命週期鉤子函數

create 和 mounted 相關

執行上面代碼，能夠看到：npm

　　beforecreated ：el 和 data 並未初始化瀏覽器

　　created：完成了data數據的初始化 el 沒有app

　　beforeMount：完成了el 和 data的初始化ide

　　mounted：完成了掛載函數

也就是說~掛載前的狀態是虛擬DOM技術，先把坑站住了~掛載以後才真正的把值渲染進去~post

update 相關

咱們在瀏覽器console裏執行命令：ui

　　app.message = "hello~"this

咱們就出發了update相關的鉤子函數~也就是說data裏的值被修改會出發update的操做~

destroy 相關

咱們在瀏覽器console裏執行命令：

　　app.$destroy();

觸發了destroy相關的鉤子函數，也就是說組件被銷燬~