[toc] ### vue生命周期 ``` beforeCreate created: 無法獲取dom beforeMount mounted updated beforeDestroyed destroyed ``` #### 1.beforeCreate 在實例初始化之后，在initState之前被vue內部的callHook方法觸發了beforeCreate里的回調函數，所以這個時候data中的數據還不是響應式的，無法獲取到 ```js initLifecycle(vm) initEvents(vm) initRender(vm) callHook(vm, 'beforeCreate') // 在 initState 之前調用 // 注入 initInjections(vm) // resolve injections before data/props // 響應式 initState(vm) initProvide(vm) // resolve provide after data/props callHook(vm, 'created') ``` #### 2.created 實例已經創建完成之后被調用。在這一步，實例已完成以下的配置：數據觀測(data observer)，屬性和方法的運算， watch/event 事件回調。 在執行data()方法前props屬性有數據已經可以訪問，watch和computed監聽函數此時為null，此時this.computed里的計算屬性值為undefined。data函數執行完后，watch和computed監聽函數才可用，因為data函數執行完后，data函數return的屬性這時才可用。然而，掛載階段還沒開始，$el 屬性目前不可見。 #### 3.beforeMount 在掛載開始之前被調用，在這之后組件的 render 函數首次被調用 #### 4.mounted 可以操作dom, el被新創建的vm.$el替換，并掛載到實例上去之后調用該鉤子 #### 5.beforeUpdate 數據更新時調用，發生在虛擬 DOM 重新渲染和打補丁之前。你可以在這個鉤子中進一步地更改狀態，這不會觸發附加的重渲染過程 #### 6.updated 由于數據更改之后，導致虛擬DOM重新渲染和打補丁，在這之后會調用該鉤子 #### 7.beforeDestroyed 實例銷毀之前調用，在這時，實例還可以使用 #### 8.destroyed Vue 實例銷毀后調用。調用后，Vue 實例指示的所有東西都會解綁定，所有的事件監聽器會被移除，所有的子實例也會被銷毀。 #### 9.activated keep-alive 組件激活時調用。 #### 10.deactivated keep-alive 組件停用時調用。