Vue系列(九)之生命週期

Vue實例提供了生命週期供我們調用。所謂生命週期就是Vue實例從創建到銷燬的過程。

直接看代碼註釋吧：

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            name: 'ayy'
        },
        /**
         * 實例初始化之後
         * data，methods，watch等還未配置
         * 無法操作數據和DOM
         * 所以基本沒什麼作用
         */
        beforeCreate() {
            console.log('beforeCreate')
        },
        /**
         * Data已經初始化，Dom未渲染
         * 可以操作data，無法操作Dom
         * 一般接口請求數據會在此函數中調用(也有說在mounted中調用接口)
         */
        created() {
            console.log('created')
        },
        /**
         * 渲染之前被調用，render函數首次被調用
         * Dom未掛載
         * 可以操作data，無法操作dom
         * 基本不用
         */
        beforeMount() {
            console.log('beforeMount')
        },
        /**
         * Dom已經掛載
         * 可以操作Data和Dom
         */
        mounted() {
            console.log('mounted')
        },
        /**
         * 數據改變前調用
         */
        beforeUpdate() {
            console.log('beforeUpdate')
        },
        /**
         * 數據改變後調用
         */
        updated() {
            console.log('updated')
        },
        /**
         * 頁面銷燬前
         * 可以操作data，無法操作dom
         * 主要在此方法中，釋放一些資源等
         */
        beforeDestroy() {
            console.log('beforeDestroy')
        },
        /**
         * 銷燬後調用
         */
        destroyed() {
            console.log('destroyed')
        }
    });
</script>

目前還有一個疑問，關於網絡請求調用的時機，網上有兩種說法，created中和mounted中，我個人理解是在created中發起網絡請求，因爲created比mounted回調的要早，而且data已經完成初始化。在項目中也是這樣用的，目前沒發現有什麼問題。mounted中發起網絡請求的說法也不會有問題，但是不是稍微遲了些嗎？這個問題有待研究。