vue生命周期 · 常用筆記

# vue生命周期 ![](https://img.kancloud.cn/90/cb/90cb5630328af50ea5a26f8b38709fd1_468x1186.png) ### [beforeCreate](https://cn.vuejs.org/v2/api/#beforeCreate "beforeCreate") - **類型**：`Function` - **詳細**：在實例初始化之后，數據觀測 (data observer) 和 event/watcher 事件配置之前被調用 ### [created](https://cn.vuejs.org/v2/api/#created "created") - **類型**：`Function` - **詳細**：在實例創建完成后被立即調用。在這一步，實例已完成以下的配置：數據觀測 (data observer)，property 和方法的運算，watch/event 事件回調。然而，掛載階段還沒開始，`$el`property 目前尚不可用。 ### [beforeMount](https://cn.vuejs.org/v2/api/#beforeMount "beforeMount") - **類型**：`Function` - **詳細**：在掛載開始之前被調用：相關的`render`函數首次被調用。 **該鉤子在服務器端渲染期間不被調用。** ### [mounted](https://cn.vuejs.org/v2/api/#mounted "mounted") - **類型**：`Function` - **詳細**：實例被掛載后調用，這時`el`被新創建的`vm.$el`替換了。如果根實例掛載到了一個文檔內的元素上，當`mounted`被調用時`vm.$el`也在文檔內。注意`mounted`**不會**保證所有的子組件也都一起被掛載。如果你希望等到整個視圖都渲染完畢，可以在`mounted`內部使用[vm.$nextTick](https://cn.vuejs.org/v2/api/#vm-nextTick)： ``` <pre class="calibre14">``` mounted: function () { this.$nextTick(function () { // Code that will run only after the // entire view has been rendered }) } ``` ``` **該鉤子在服務器端渲染期間不被調用。** ### [beforeUpdate](https://cn.vuejs.org/v2/api/#beforeUpdate "beforeUpdate") - **類型**：`Function` - **詳細**：數據更新時調用，發生在虛擬 DOM 打補丁之前。這里適合在更新之前訪問現有的 DOM，比如手動移除已添加的事件監聽器。 **該鉤子在服務器端渲染期間不被調用，因為只有初次渲染會在服務端進行。** ### [updated](https://cn.vuejs.org/v2/api/#updated "updated") - **類型**：`Function` - **詳細**：由于數據更改導致的虛擬 DOM 重新渲染和打補丁，在這之后會調用該鉤子。當這個鉤子被調用時，組件 DOM 已經更新，所以你現在可以執行依賴于 DOM 的操作。然而在大多數情況下，你應該避免在此期間更改狀態。如果要相應狀態改變，通常最好使用[計算屬性](https://cn.vuejs.org/v2/api/#computed)或[watcher](https://cn.vuejs.org/v2/api/#watch)取而代之。注意`updated`**不會**保證所有的子組件也都一起被重繪。如果你希望等到整個視圖都重繪完畢，可以在`updated`里使用[vm.$nextTick](https://cn.vuejs.org/v2/api/#vm-nextTick)： ``` <pre class="calibre13">``` updated: function () { this.$nextTick(function () { // Code that will run only after the // entire view has been re-rendered }) } ``` ``` **該鉤子在服務器端渲染期間不被調用。** ### [activated](https://cn.vuejs.org/v2/api/#activated "activated") - **類型**：`Function` - **詳細**：被 keep-alive 緩存的組件激活時調用。 **該鉤子在服務器端渲染期間不被調用。** - **參考**： - [構建組件 - keep-alive](https://cn.vuejs.org/v2/api/#keep-alive) - [動態組件 - keep-alive](https://cn.vuejs.org/v2/guide/components-dynamic-async.html#%E5%9C%A8%E5%8A%A8%E6%80%81%E7%BB%84%E4%BB%B6%E4%B8%8A%E4%BD%BF%E7%94%A8-keep-alive) ### [deactivated](https://cn.vuejs.org/v2/api/#deactivated "deactivated") - **類型**：`Function` - **詳細**：被 keep-alive 緩存的組件停用時調用。 **該鉤子在服務器端渲染期間不被調用。** - **參考**： - [構建組件 - keep-alive](https://cn.vuejs.org/v2/api/#keep-alive) - [動態組件 - keep-alive](https://cn.vuejs.org/v2/guide/components-dynamic-async.html#%E5%9C%A8%E5%8A%A8%E6%80%81%E7%BB%84%E4%BB%B6%E4%B8%8A%E4%BD%BF%E7%94%A8-keep-alive) ### [beforeDestroy](https://cn.vuejs.org/v2/api/#beforeDestroy "beforeDestroy") - **類型**：`Function` - **詳細**：實例銷毀之前調用。在這一步，實例仍然完全可用。 **該鉤子在服務器端渲染期間不被調用。** ### [destroyed](https://cn.vuejs.org/v2/api/#destroyed "destroyed") - **類型**：`Function` - **詳細**：實例銷毀后調用。該鉤子被調用后，對應 Vue 實例的所有指令都被解綁，所有的事件監聽器被移除，所有的子實例也都被銷毀。 **該鉤子在服務器端渲染期間不被調用。** # 補充知識點 ``` <pre class="calibre13">``` created鉤子可以獲取Vue的data，調用Vue方法，獲取原本HTML上的直接加載出來的DOM，但是無法獲取到通過掛載模板生成的DOM ``` ``` ``` <pre class="calibre13">``` **3.beforeMount** 在掛載開始之前被調用：相關的 render 函數（模板）首次被調用。例如通過v-for生成的html還沒有被掛載到頁面上 ``` ``` ``` <pre class="calibre13">``` **4.mounted** el 被新創建的 vm.$el 替換，并掛載到實例上去之后調用該鉤子。有初始值的DOM渲染，例如我們的初始數據list,渲染出來的li，只有這里才能獲取 ``` ``` ``` <pre class="calibre13">``` **5.beforeUpdate** 數據更新時調用，發生在虛擬 DOM 重新渲染和打補丁之前。你可以在這個鉤子中進一步地更改狀態，這不會觸發附加的重渲染過程。當我們更改Vue的任何數據，都會觸發該函數 ``` ``` ``` <pre class="calibre13">``` **6.updated** 由于數據更改導致的虛擬 DOM 重新渲染和打補丁，在這之后會調用該鉤子。當這個鉤子被調用時，組件 DOM 已經更新，所以你現在可以執行依賴于 DOM 的操作。然而在大多數情況下，你應該避免在此期間更改狀態，因為這可能會導致更新無限循環。該鉤子在服務器端渲染期間不被調用。數據更新就會觸發（vue所有的數據只有有更新就會觸發）,如果想數據一遍就做統一的處理，可以用這個，如果想對不同數據的更新做不同的處理可以用nextTick，或者是watch進行監聽 ``` ``` ``` <pre class="calibre13">``` **7.beforeDestroy** 實例銷毀之前調用。在這一步，實例仍然完全可用。 ``` ``` ``` <pre class="calibre14">``` **8.destroyed** Vue 實例銷毀后調用。調用后，Vue 實例指示的所有東西都會解綁定，所有的事件監聽器會被移除，所有的子實例也會被銷毀。該鉤子在服務器端渲染期間不被調用。 ``` ```