Vue 例項的生命週期

在vue中，每個例項都有自己的乙個完整的生命週期，包括開始建立 —— 初始化資料 —— 編譯模板 —— 將例項掛載到dom—— 渲染 —— 更新 —— 渲染 —— 解除安裝等一系列過程。同時在這個過程中也會執行一些叫做生命週期鉤子的函式，這樣我們就可以在例項生命週期的不同階段做一些需要做的事情。

這裡可能會有個小疑惑，怎麼突然又說是vue例項呢？例項和元件有什麼區別嗎？

new vue();

通過new vue()建立乙個vue例項。在例項化vue時，需要傳入乙個選項物件，它可以包含掛載元素el、路由router、模板template、資料data、方法methods、生命週期鉤子等選項。

vue元件是被擴充套件的vue例項。同vue例項類似，它也需要傳入乙個選項物件，包含資料、模板、生命週期鉤子函式等等。在前面我們只介紹了單檔案元件的方式來建立元件，也可以這樣來建立乙個元件：

// 定義乙個名為 button-counter 的新元件
vue.component('button-counter', 
},template: 'you clicked me } times.'
})

可以發現，和建立vue例項非常的類似，所有的vue元件同時都是vue的例項。所以我們說：例項的生命週期也叫做元件的生命週期。vue例項從建立到銷毀的過程，就是生命週期。文章的開頭我們提到了生命週期鉤子函式，它是框架提供的函式，能夠讓開發人員的**參與到元件的生命週期中。也就是說，通過鉤子函式，可以控制項的行為。這裡有兩個點需要記住：

生命週期圖示：

圖中，紅色矩形框代表著在生命週期對應階段的鉤子函式。

我們通過三種案例來學習生命週期函式：

案例中，通過開啟控制台檢視鉤子函式列印的內容來學習。

1、單元件的生命週期

更新 }
銷毀

初始化元件時列印：

--single--beforecreate --single--created --single--beforemount --single--mounted

data中的資料變化時列印：

--single--beforeupdate --single--updated

元件銷毀時列印：

--single--beforedestroy --single--destroyed

所以我們可以得出以下結論：

2、父子元件的生命週期

建立乙個父元件：

父元件更新 }
父元件銷毀

建立乙個子元件：

父元件傳遞的props：}
子元件更新 }
子元件銷毀

初始化元件時列印：

--parent--beforecreate --parent--created --parent--beforemount --此時data未初始化--child--beforecreate --1--child--created --1--child--beforemount --1--child--mounted --parent--mounted

當子元件data中的值變化時列印：

--1--child--beforeupdate --1--child--updated

當父元件data中的值變化時列印（子元件接受了父元件傳遞的props）：

--parent--beforeupdate --2--child--beforeupdate --2--child--updated --parent--updated

當子元件銷毀時列印：

--1--child--beforedestroy --1--child--destroyed

當父元件銷毀時列印：

--parent--beforedestroy --1--child--beforedestroy --1--child--destroyed --parent--destroyed

結論：

3、兄弟元件的生命週期

建立乙個單元件：

更新 }
銷毀

引入兩個單元件，構建兄弟元件：

兄弟1 兄弟2兄弟兩個的父親更新 } 銷毀

初始化元件時列印：

--parent--beforecreate --parent--created --parent--beforemount --此時data未初始化--beforecreate --cihld1--created --cihld1--beforemount --此時data未初始化--beforecreate --child2--created --child2--beforemount --cihld1--mounted --child2--mounted --parent--mounted

當child1更新和銷毀時，列印：

--cihld1--beforeupdate --cihld1--updated --cihld1--beforedestroy --cihld1--destroyed

當child2更新和銷毀時，列印：

--cihld2--beforeupdate --cihld2--updated --cihld2--beforedestroy --cihld2--destroyed

當父元件銷毀時，列印：

--parent--beforedestroy --cihld1--beforedestroy --cihld1--destroyed --child2--beforedestroy --child2--destroyed --parent--destroyed

結論：

Vue 例項的生命週期

vue例項生命週期

Vue例項生命週期

vue例項的生命週期

Vue 例項的生命週期

vue例項生命週期

Vue例項生命週期

vue例項的生命週期

相關推薦