理解VUE生命週期

weixin_43918070發表於2021-01-01
Vue

Vue生命週期

Vue例項需要經過建立、初始化資料、編譯模板、掛載DOM、渲染、更新、渲染、解除安裝等一系列過程，這個過程就是Vue的生命週期，在Vue的整個生命週期中提供很多鉤子函式在生命週期的不同時刻呼叫，Vue中提供的鉤子函式有beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed。

例項程式碼：
<!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>vue生命週期學習</title>
    <script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
</head>
<body>
<div id="app">
    <h1>{{message}}</h1>
</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            message: 'Vue的生命週期'
        },
        beforeCreate: function() {
            console.group('------beforeCreate建立前狀態------');
            console.log("%c%s", "color:red" , "el     : " + this.$el); //undefined
            console.log("%c%s", "color:red","data   : " + this.$data); //undefined
            console.log("%c%s", "color:red","message: " + this.message)
        },
        created: function() {
            console.group('------created建立完畢狀態------');
            console.log("%c%s", "color:red","el     : " + this.$el); //undefined
            console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化
            console.log("%c%s", "color:red","message: " + this.message); //已被初始化
        },
        beforeMount: function() {
            console.group('------beforeMount掛載前狀態------');
            console.log("%c%s", "color:red","el     : " + (this.$el)); //已被初始化
            console.log(this.$el);
            console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化
            console.log("%c%s", "color:red","message: " + this.message); //已被初始化
        },
        mounted: function() {
            console.group('------mounted 掛載結束狀態------');
            console.log("%c%s", "color:red","el     : " + this.$el); //已被初始化
            console.log(this.$el);
            console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化
            console.log("%c%s", "color:red","message: " + this.message); //已被初始化
        },
        beforeUpdate: function () {
            console.group('beforeUpdate 更新前狀態===============》');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el);
            console.log("%c%s", "color:red","data   : " + this.$data);
            console.log("%c%s", "color:red","message: " + this.message);
        },
        updated: function () {
            console.group('updated 更新完成狀態===============》');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el);
            console.log("%c%s", "color:red","data   : " + this.$data);
            console.log("%c%s", "color:red","message: " + this.message);
        },
        beforeDestroy: function () {
            console.group('beforeDestroy 銷燬前狀態===============》');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el);
            console.log("%c%s", "color:red","data   : " + this.$data);
            console.log("%c%s", "color:red","message: " + this.message);
        },
        destroyed: function () {
            console.group('destroyed 銷燬完成狀態===============》');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el);
            console.log("%c%s", "color:red","data   : " + this.$data);
            console.log("%c%s", "color:red","message: " + this.message)
        }
    })
</script>
</html>
vue掛載元件優先順序

在這裡插入圖片描述

vue生命週期過程
  • beforeCreate：初始化元件，沒有載入data資料和methods函式，只是載入額外的東西。
  • created：載入繫結元件資料、data資料和methods函式，完成事件回撥，計算屬性和methods函式掛載，不過依然沒有載入el元素。
  • beforeMount：完成頁面解析，並在記憶體中解析指令和資料，頁面模組存在於記憶體中，沒有渲染DOM。
  • mounted：把記憶體中的所有的data資料和methods、el元素，渲染到DOM物件中並在頁面顯示。
  • beforeUpdated：資料更新前，所有元素依然存在，並可以訪問。
  • updated ：渲染資料更改後的資料，並頁面顯示。
  • beforeDestory：銷燬資料前，所有的資料依然存在。
  • destroyed：銷燬資料，包括所有的元件、物件、監聽事件，全部被銷燬，並無法在頁面顯示。

轉載地址

相關文章