Vue 生命週期鉤子

所有的生命週期鉤子自動綁定 this 上下文到實例中，因此你可以訪問數據，對屬性和方法進行運算。這意味着你不能使用箭頭函數來定義一個生命週期方法 (例如 created: () => this.fetchTodos())。這是因爲箭頭函數綁定了父上下文，

生命週期鉤子函數的簡介

鉤子函數名稱	執行時間	作用
beforeCreate()	在組件創建之前執行	一般用來做 Ajax 請求
created()	在組件創建完畢的時候執行	進行同步的操作，比如給data選項中的數據賦值
beforeMount()	掛載元素之前執行	做一些檢查數據或者檢查狀態的操作
mounted()	掛載元素完畢執行
beforeUpdate()	組件中的數據發生了更新之前執行	主要是檢測模板是否發生了變化
updated()	組件中的數據發生了更新之後執行	主要是檢測模板是否發生了變化
beforeDestroy()	在組件銷燬之前執行	可以在這個地方 保存這個組件裏的狀態
destroyed()	組件銷燬之後執行	檢查操作
activated()	keep-alive 組件激活時調用
deactiveted()	keep-alive 組件停用時調用

生命週期鉤子函數的寫法

// 如下，組件中的生命週期鉤子的寫法
const Test = {
    template: `
    <div>
        <button>Button</button>
    </div>
    `,
    beforeCreate() {
        console.log('在實例初始化之後，數據觀測(data observer) 和event/watcher事件配置之前被調用');
    },
    created() {
        console.log('在實例創建完成後被立即調用。在這一步，實例已經完成以下配置：數據觀測，屬性和方法的運算，watch/event事件回調。然而，掛載階段還沒開始，$el屬性目前不可見。');
    },
    beforeMount() {
        console.log('在掛載開始之前被調用');
    },
    mounted() {
        console.log('el 被新創建的 vm.$el 替換，並掛載到實例上去之後調用該鉤子。');
    },
    beforeUpdate() {
        console.log('數據更新時調用，發生在虛擬DOM 打補丁之前。在這裏適合在更新之前訪問現有的DOM，比如手動移除已添加的事件監聽器。');
    },
    updated() {
        console.log('由於數據更改導致的虛擬DOM重新渲染和打補丁，在這之後會調用這個鉤子。');
    },
    beforeDestroy() {
        console.log('實例銷燬之前調用，在這一步，實例仍然完全可用。');
    },
    destroyed() {
        console.log('Vue 實例銷燬後調用。');
    },
    activated() {
        console.log('keep-alive 組件激活時調用。');
    },
    deactivated() {
        console.log('keep-alive 組件停用時調用。');
    },
}

注意1：什麼時候，鉤子可以訪問到date中的數據呢？

data() {
    return {
        name: '宮鑫'
    }
},
beforeCreate() {
    console.log(this.name);
    // => undefined
},
created() {
    console.log(this.name);
    // => 宮鑫
},

因爲 beforeCreate() ,是在數據觀測 (data observer) 和 event/watcher 事件配置之前被調用。所以此階段訪問出來的數據是 undefined
而 created() 被調用的時候，實例已經完成以下的配置：數據觀測，屬性和方法的運算，watch/event事件回調。所以此階段能訪問到數據

但是，這兩個階段，訪問到的 this對象，打印出來是相同的，原因是，this是一個對象，既然是對象就是引用數據類型，當我們看到打印的數據的時候，其實已經到了 mounted() 階段。所以我們看到的 this 對象，實際上是這個階段的數據。

注意2：beforeUpdate() 和 updated()需要注意：
這兩個鉤子函數，並不是所有的 data 對象中的數據發生改變都會調用，而是模板中用到的數據發生改變纔會調用；
因爲數據的修改，導致虛擬DOM 的重新渲染和打補丁；
而 beforeUpdate() 是發生在虛擬 DOM 打補丁之前，updated() 是在虛擬DOM重新渲染和打補丁之後纔會調用；

注意3：銷燬階段
銷燬階段一般是不會觸發的，可以通過 v-if 來銷燬一個組件，當我們的組件被 <keep-alive> 組件包裹的時候，就銷燬不了了，可以觸發 activated() 和 deavtivated() 函數；