深入了解Vue生命週期 Vue2 0

生命週期：vue 例項從開始建立、初始化資料、編譯模板、掛載dom→渲染、更新→渲染、解除安裝等一系列過程，我們稱這是 vue 的生命週期，各個階段有相對應的事件鉤子

生命週期鉤子

元件狀態

最佳實踐

beforecreate

例項初始化之後，this指向建立的例項，不能訪問到data、computed、watch、methods上的方法和資料

常用於初始化非響應式變數

created

例項建立完成，可訪問data、computed、watch、methods上的方法和資料，未掛載到dom，不能訪問到$el屬性，$ref屬性內容為空陣列

常用於簡單的ajax請求，頁面的初始化

beforemount

在掛載開始之前被呼叫，beforemount之前，會找到對應的template，並編譯成render函式

-mounted

例項掛載到dom上，此時可以通過dom api獲取到dom節點，$ref屬性可以訪問

常用於獲取vnode資訊和操作，ajax請求

beforeupdate

響應式資料更新時呼叫，發生在虛擬dom打補丁之前

適合在更新之前訪問現有的dom，比如手動移除已新增的事件***

updated

虛擬 dom 重新渲染和打補丁之後呼叫，元件dom已經更新，可執行依賴於dom的操作

避免在這個鉤子函式中運算元據，可能陷入死迴圈

beforedestroy

例項銷毀之前呼叫。這一步，例項仍然完全可用，this仍能獲取到例項

常用於銷毀定時器、解綁全域性事件、銷毀外掛程式物件等操作

destroyed

例項銷毀後呼叫，呼叫後，vue 例項指示的所有東西都會解繫結，所有的事件***會被移除，所有的子例項也會被銷毀

-注意：

created階段的ajax請求與mounted請求的區別：前者頁面檢視未出現，如果請求資訊過多，頁面會長時間處於白屏狀態；

mounted不會承諾所有的子元件也都一起被掛載。如果你希望等到整個檢視都渲染完畢，可以用 vm.$nexttick；

vue2.0之後主動呼叫$destroy()不會移除dom節點，作者不推薦直接destroy這種做法，如果實在需要這樣用可以在這個生命週期鉤子中手動移除dom節點。

對於執行順序和什麼時候執行，看上面兩個圖基本有個了解了。下面我們將結合**去看看鉤子函式的執行。

data: ,

beforecreate: function () ,
created: function () ,
beforemount: function () ,
mounted: function () ,
beforeupdate: function () ,
updated: function () ,
beforedestroy: function () ,
destroyed: function () 
})

beforecreated：el和data並未初始化 

created:完成了data資料的初始化，el沒有 

beforemount：完成了el和data初始化 

mounted：完成掛載

這裡我們在 chrome console裡執行以下命令

下面就能看到data裡的值被修改後，將會觸發update的操作。

有關於銷毀，暫時還不是很清楚。我們在console裡執行下命令對 vue例項進行銷毀。銷毀完成後，我們再重新改變message的值，vue不再對此動作進行響應了。但是原先生成的dom元素還存在，可以這麼理解，執行了destroy操作，後續就不再受vue控制了。

完

Vue2 詳解生命週期

最近使用vue2做了乙個專案，生命週期鉤子分別是 beforecreate 例項剛建立，屬性繫結之前 created 例項建立完成，屬性繫結，但是還未將例項掛載到 el 上，也就是掛載元素上。beforemount 模板編譯 掛載前 mounted 模板編譯 掛載之後 在mounted請求資料時，將...

Vue2的生命週期

vue 例項有乙個完整的生命週期，也就是從開始建立 初始化資料 編譯模版 掛載 dom 渲染 更新 渲染 解除安裝等一系列過程，我們稱這是 vue 的生命週期。生命週期 描述beforecreate 元件例項被建立之初，data 和 methods 中的資料還沒有初始化 created 元件例項已經...

vue2中監聽生命週期（hook）

很多人都知道，vue3中加入了hook的概念，讓我們 看的更為整齊，但是不少人卻不知道，其實vue2中已經有了 hook 的概念。下面就給大家說說vue2中怎麼使用hook 先上一段 大多數人在開發過程中都是這麼寫的，這麼寫不能說不好吧，但是 過分分散，很是雜亂，中間可能相差幾百行，可讀性相當差 下...