vue的生命週期

時間 2019-12-19

標籤 vue 生命週期简体版

原文原文鏈接

目錄vue

生命週期鉤子

表示一個vue實例從建立到銷燬的這個過程,將這個過程的一些時間節點賦予了對應的鉤子函數
鉤子函數: 知足特色條件被回調的方法

new Vue({
    el: "#app",
    data: {
        msg: "message"
    },
    beforeCreate () {
        console.log("實例剛剛建立");
        console.log(this.msg
                    
    },
    created () {
        console.log("實例建立成功, data, methods已擁有");
        console.log(this.msg);
    },
    mounted () {
        console.log("頁面已被vue實例渲染, data, methods已更新");
    }
    // 拿到需求 => 肯定鉤子函數 => 解決需求的邏輯代碼塊
})

生命週期

生命週期鉤子函數的使用

/** 組件的生命週期鉤子
     * 一個組件，會在頁面中渲染，也會銷燬存放到內存(不渲染) => 加載組件到銷燬組件
     * 從加載一個組件到銷燬該組件，整個生命週期中存在不少特殊的時間節點(組件要建立了，建立成功了，要加載了，加載成功了，
     * 要更新數據了，數據更新完畢了，要銷燬了，銷燬成功了)，這些特殊的時間節點，vue都提供了對應的回調方法，來輔助完成在這些時間
     * 節點須要完成的業務邏輯
     *
     * 生命週期鉤子函數書寫的位置：鉤子直接做爲vue實例的成員
     *
     * 重點：一、書寫位置  二、每一個鉤子節點時的特性
     */

export default {
        name: "carDetail",
        data() {
            return {
                num: 10,
                car: {}
            }
        },
        methods: {
            backAction() {
                // go的參數是正負整數，表明歷史記錄前進或後退幾步
                this.$router.go(-1);
            }
        },
        beforeCreate() {
            window.console.log('該組件要被建立了');
            window.console.log(this.num);
        },
        // 最經常使用的鉤子函數：組件加載後，能夠請求後臺數據，更新組件數據；組件間路由傳參的值獲取
        created() {
            window.console.log('該組件已經建立了');
            window.console.log(this.num);

            // 獲取跳轉到詳情頁的當前書本id，再根據id得到書本的詳細信息
            // window.console.log(this.$router);  // $router管理路由跳轉的
            // window.console.log(this.$route);  // $route管理路由數據的
            let pk = this.$route.params.pk;
            // window.console.log(pk in {'1': 100, '2': 200});
            if (!(pk in cars_detail)) {
                this.$router.go(-1);  // 數據不存在，返回
            }
            this.car = cars_detail[pk];
        },
        destroyed() {
            window.console.log('該組件已經銷燬了')
        }
    }