基于Vue實(shí)例生命周期(全面解析)
前面的話
Vue實(shí)例在創(chuàng)建時(shí)有一系列的初始化步驟，例如建立數(shù)據(jù)觀察，編譯模板，創(chuàng)建數(shù)據(jù)綁定等。在此過程中，我們可以通過一些定義好的生命周期鉤子函數(shù)來運(yùn)行業(yè)務(wù)邏輯。本文將詳細(xì)介紹Vue實(shí)例的生命周期
圖示
下圖是Vue實(shí)例生命周期的圖示
解釋
接下來，根據(jù)提供的生命周期鉤子，對(duì)Vue實(shí)例各個(gè)階段的情況進(jìn)行詳細(xì)說明
【beforeCreate】
在實(shí)例開始初始化時(shí)同步調(diào)用。此時(shí)數(shù)據(jù)觀測、事件等都尚未初始化
【created】
在實(shí)例創(chuàng)建之后調(diào)用。此時(shí)已完成數(shù)據(jù)觀測、事件方法，但尚未開始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)組件初始化渲染的過程中調(diào)用該方法
【deactivated】
需要配合動(dòng)態(tài)組件keep-live屬性使用。在動(dòng)態(tài)組件初始化移出的過程中調(diào)用該方法
簡單實(shí)例
下面寫一個(gè)簡單實(shí)例來更清楚地了解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í)例生命周期(全面解析)就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
單向數(shù)據(jù)流方式使用一個(gè)上傳數(shù)據(jù)流和一個(gè)下傳數(shù)據(jù)流進(jìn)行雙向數(shù)據(jù)通信,兩個(gè)數(shù)據(jù)流之間相互獨(dú)立,下面這篇文章主要給大家介紹了關(guān)于vue單向數(shù)據(jù)流的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07
Vue實(shí)現(xiàn)當(dāng)前頁面刷新的七種方法總結(jié)
大家在vue項(xiàng)目中當(dāng)刪除或者增加一條記錄的時(shí)候希望當(dāng)前頁面可以重新刷新，但是vue框架自帶的router是不支持刷新當(dāng)前頁面功能,所以本文就給大家分享了七種vue實(shí)現(xiàn)當(dāng)前頁面刷新的方法,需要的朋友可以參考下2023-07-07
這篇文章主要介紹了vue 組件基礎(chǔ)知識(shí)的相關(guān)資料，幫助大家更好的理解和使用vue的組件，感興趣的朋友可以了解下2021-01-01
實(shí)例詳解Vue項(xiàng)目使用eslint + prettier規(guī)范代碼風(fēng)格
這篇文章主要介紹了Vue項(xiàng)目使用eslint + prettier規(guī)范代碼風(fēng)格,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2018-08-08
這篇文章主要介紹了Vue富文本插件(quill-editor)的使用及說明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。2023-02-02
vue實(shí)現(xiàn)裁切圖片同時(shí)實(shí)現(xiàn)放大、縮小、旋轉(zhuǎn)功能
這篇文章主要介紹了vue實(shí)現(xiàn)裁切圖片同時(shí)實(shí)現(xiàn)放大、縮小、旋轉(zhuǎn)功能，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-03-03
Vue實(shí)現(xiàn)兩個(gè)列表之間的數(shù)據(jù)聯(lián)動(dòng)的代碼示例
在Vue.js應(yīng)用開發(fā)中,列表數(shù)據(jù)的聯(lián)動(dòng)是一個(gè)常見的需求,這種聯(lián)動(dòng)可以用于多種場景,例如過濾篩選、關(guān)聯(lián)選擇等,本文將詳細(xì)介紹如何在Vue項(xiàng)目中實(shí)現(xiàn)兩個(gè)列表之間的數(shù)據(jù)聯(lián)動(dòng),并通過多個(gè)具體的代碼示例來幫助讀者理解其實(shí)現(xiàn)過程,需要的朋友可以參考下2024-10-10
vite項(xiàng)目vite.config.js詳細(xì)配置
vite.config.js是Vite框架中的配置文件,用于配置項(xiàng)目的構(gòu)建和運(yùn)行時(shí)的行為,下面這篇文章主要給大家介紹了關(guān)于vite項(xiàng)目vite.config.js詳細(xì)配置的相關(guān)資料,需要的朋友可以參考下2023-05-05
Vue?element-ui中表格過長內(nèi)容隱藏顯示的實(shí)現(xiàn)方式
在Vue項(xiàng)目中,使用ElementUI渲染表格數(shù)據(jù)時(shí),如果某一個(gè)列數(shù)值長度超過列寬,會(huì)默認(rèn)換行,造成顯示不友好,下面這篇文章主要給大家介紹了關(guān)于Vue?element-ui中表格過長內(nèi)容隱藏顯示的實(shí)現(xiàn)方式,需要的朋友可以參考下2022-09-09
這篇文章主要介紹了vue組件代碼分塊和懶加載講解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04