基于Vue實(shí)例生命周期(全面解析)

前面的話

Vue實(shí)例在創(chuàng)建時(shí)有一系列的初始化步驟，例如建立數(shù)據(jù)觀察，編譯模板，創(chuàng)建數(shù)據(jù)綁定等。在此過(guò)程中，我們可以通過(guò)一些定義好的生命周期鉤子函數(shù)來(lái)運(yùn)行業(yè)務(wù)邏輯。本文將詳細(xì)介紹Vue實(shí)例的生命周期

圖示

下圖是Vue實(shí)例生命周期的圖示

解釋

接下來(lái)，根據(jù)提供的生命周期鉤子，對(duì)Vue實(shí)例各個(gè)階段的情況進(jìn)行詳細(xì)說(shuō)明

【beforeCreate】

在實(shí)例開始初始化時(shí)同步調(diào)用。此時(shí)數(shù)據(jù)觀測(cè)、事件等都尚未初始化

【created】

在實(shí)例創(chuàng)建之后調(diào)用。此時(shí)已完成數(shù)據(jù)觀測(cè)、事件方法，但尚未開始DOM編譯，即未掛載到document中

【beforeMount】

在mounted之前運(yùn)行

【mounted】

在編譯結(jié)束時(shí)調(diào)用。此時(shí)所有指令已生效，數(shù)據(jù)變化已能觸發(fā)DOM更新，但不保證$el已插入文檔

【beforeUpdate】

在實(shí)例掛載之后，再次更新實(shí)例(例如更新 data)時(shí)會(huì)調(diào)用該方法，此時(shí)尚未更新DOM結(jié)構(gòu)

【updated】

在實(shí)例掛載之后，再次更新實(shí)例并更新完DOM結(jié)構(gòu)后調(diào)用

【beforeDestroy】

在開始銷毀實(shí)例時(shí)調(diào)用，此刻實(shí)例仍然有效

【destroyed】

在實(shí)例被銷毀之后調(diào)用。此時(shí)所有綁定和實(shí)例指令都已經(jīng)解綁，子實(shí)例也被銷毀

【activated】

需要配合動(dòng)態(tài)組件keep-live屬性使用。在動(dòng)態(tài)組件初始化渲染的過(guò)程中調(diào)用該方法

【deactivated】

需要配合動(dòng)態(tài)組件keep-live屬性使用。在動(dòng)態(tài)組件初始化移出的過(guò)程中調(diào)用該方法

簡(jiǎn)單實(shí)例

下面寫一個(gè)簡(jiǎn)單實(shí)例來(lái)更清楚地了解Vue實(shí)例內(nèi)部的運(yùn)行機(jī)制

<div id="example">{{message}}</div>

<script>
var vm = new Vue({
 el: '#example',
 data:{
 message:'match'
 },
 beforeCreate(){
 console.log('beforeCreate');
 },
 created(){
 console.log('created');
 },
 beforeMount(){
 console.log('beforeMount');
 },
 mounted(){
 console.log('mounted');
 },
 beforeUpdate(){
 console.log('beforeUpdate');
 },
 updated(){
 console.log('updated');
 //組件更新后調(diào)用$destroyed函數(shù)，進(jìn)行銷毀
 this.$destroy(); 
 },
 beforeDestroy(){
 console.log('beforeDestroy');
 },
 destroyed(){
 console.log('destroyed');
 },
})
</script>

以上這篇基于Vue實(shí)例生命周期(全面解析)就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com