Vue筆記 生命週期和鉤子函式

在使用vue乙個多禮拜後，感覺現在還停留在初級階段，雖然知道怎麼和後端做資料互動，但是對於mounted這個掛載還不是很清楚的。放大之，對vue的生命週期不甚了解。只知道簡單的使用，而不知道為什麼，這對後面的踩坑是相當不利的。

因為我們有時候會在幾個鉤子函式裡做一些事情，什麼時候做，在哪個函式裡做，我們不清楚。

於是我開始先去搜尋，發現vue2.0的生命週期沒啥文章。大多是1.0的版本介紹。最後還是找到一篇不錯的（會放在最後）

生命週期鉤子函式：

咱們從上圖可以很明顯的看出現在vue2.0都包括了哪些生命週期的函式了。

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

ps:下面**可以直接複製出去執行vue(,

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：完成掛載

另外在標紅處，我們能發現el還是 }，這裡就是應用的virtual dom（虛擬dom）技術，先把坑佔住了。到後面mounted掛載的時候再把值渲染進去。

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

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

destroy 相關

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

這麼多鉤子函式，我們怎麼用呢，我想大家可能有這樣的疑問吧，我也有，哈哈哈。

當然，還有更多，繼續探索中......

本文是乙個vue的生命週期的理解，如有錯誤還請大牛指正，讓小子也有得進步。

如果對你有所幫助，那是我最大的榮幸。

對了，兄台，對你有幫助的話不妨點個收藏或者推薦再走。

本文**自

Vue筆記 生命週期和鉤子函式

在使用vue乙個多禮拜後，感覺現在還停留在初級階段，雖然知道怎麼和後端做資料互動，但是對於mounted這個掛載還不是很清楚的。放大之，對vue的生命週期不甚了解。只知道簡單的使用，而不知道為什麼，這對後面的踩坑是相當不利的。因為我們有時候會在幾個鉤子函式裡做一些事情，什麼時候做，在哪個函式裡做，我...

vue生命週期，鉤子函式

一 vue生命週期簡介 咱們從上圖可以很明顯的看出現在vue2.0都包括了哪些生命週期的函式了，總結一下，對官方文件的那張圖簡化一下，就得到了這張圖。二 生命週期 對於執行順序和什麼時候執行，看上面圖基本有個了解了。下面我們將結合 去看看鉤子函式的執行。鉤子函式 1.create 和 mounted...

vue 生命週期（鉤子函式）

new vue 例項物件，下一步進入beforcreate 狀態 當使用new vue 建立物件之前，執行的事件 這裡可以做載入動畫 下一步，進入created 然後，他會檢測是否有el屬性，如果有在檢測template屬性型別，是一段渲染的函式還是一段html 然後就進入了beforemount狀...