Vue的生命週期

時間 2020-02-08

標籤 vue 生命週期简体版

原文原文鏈接

生命週期介紹

簡單說就是一個組件從開始到最後消亡所經歷的各類狀態，就是一個組件的生命週期javascript

vue的生命週期圖

beforeCreate（建立前）

beforeCreate（初始化頁面前）

詳情：實例初始化以後，組件被建立時，這時候 el，data，message 都是 underfinedhtml

場景：能夠加入 loading 事件；在服務器端的應用場景中，這個時候發送數據請求比較多一些vue

created（建立後）

created（初始化界面後）

詳情：實例建立完成後，data、methods 被初始化java

場景：結束 loading 事件；推薦這個時候發送請求數據，尤爲是返回的數據與綁定事件有關時服務器

beforeMount（載入前）

beforeMount（渲染dom前）

詳情：完成el和data初始化，在掛載開始以前被調用markdown

場景：能夠發送數據請求app

注意：在服務器端渲染期間不會被調用dom

mounted（載入後）

mounted（渲染dom後）

詳情：vue實例已經掛載到頁面中this

場景：獲取 el 中 DOM 元素，進行 DOM 操做；若是返回的數據操做依賴 DOM 完成，推薦這個時候發送數據請求spa

注意：在服務器端渲染期間不會被調用

beforeUpdate（更新前）

beforeUpadated（更新數據前）

詳情：數據更新時調用

場景：掛載完成以前訪問現有DOM，好比手動移除已添加的事件監聽器；也能夠進一步修改數據

注意：在服務器渲染期間不會被調用，只有初次渲染會在服務端調用

updated（更新後）

updated（更新數據後）

詳情：因爲數據更改，從新渲染時調用

場景：可執行依賴與DOM的操做

注意：服務器端渲染期間不會被調用

beforeDestory（銷燬前）

beforeDestory（卸載組件前）

詳情：實例銷燬以前調用

場景：實例銷燬以前，執行清理任務，好比：清除定時器等

注意：服務器端渲染期間不會被調用

destoryed（銷燬後）

destroyed（卸載組件後）

詳情：vue實例銷燬後調用。調用後，Vue實例指示的全部東西都會被解綁定，全部的事件監聽器會被移除，全部的子實例也會被銷燬

場景：提示已刪除

注意：服務器端渲染期間不會被調用

生命週期代碼的執行效果

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="UTF-8">
    <script type="text/javascript" src="https://cdn.jsdelivr.net/vue/2.1.3/vue.js"></script>
</head>
<body>

<div id="app">
    <p>{{ message }}</p>
    <button v-on:click="change()">change</button>
    <button v-on:click="destroy()">destroy</button>
</div>

<script type="text/javascript">

    var app = new Vue({
        el: '#app',
        data: {
            message: 18
        },
        beforeCreate: function () {
            console.group('beforeCreate 建立前');
            console.log("el: " + this.$el);
            console.log("data: " + this.$data);
            console.log("message: " + this.message)
        },
        created: function () {
            console.group('created 建立完畢');
            console.log("el: " + this.$el);
            console.log("data: " + this.$data + JSON.stringify(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('destroyed 銷燬完成');
            console.log("el: " + this.$el);
            console.log("data: " + this.$data);
            console.log("message: " + this.message)
        },
        methods: {
            change() {
                app.message++;
            },
            destroy() {
                app.$destroy();
            }
        }
    })
</script>
</body>
</html>
複製代碼

頁面運行效果