一文搞懂Vue八大生命周期鉤子函數(shù)
一.速識概念:
我們把一個對象從生成(new)到被銷毀(destory)的過程,稱為生命周期。而生命周期函數(shù),就是在某個時刻會自動執(zhí)行的函數(shù)。
按照官方的原話,就是每個 Vue 實例在被創(chuàng)建時都要經(jīng)過一系列的初始化過程——例如,需要設(shè)置數(shù)據(jù)監(jiān)聽、編譯模板、將實例掛載到 DOM 并在數(shù)據(jù)變化時更新 DOM 等。同時在這個過程中也會運行一些叫做生命周期鉤子的函數(shù),這給了用戶在不同階段添加自己的代碼的機會。
簡單來說就是每個Vue實例在被創(chuàng)建時都要經(jīng)過一系列的初始化過程:創(chuàng)建實例,裝載模板,渲染模板等。Vue為生命周期中的每個狀態(tài)都設(shè)置了鉤子函數(shù)(監(jiān)聽函數(shù)) 。每當(dāng)Vue實例處于不同的生命周期時,對應(yīng)的函數(shù)就會被觸發(fā)調(diào)用。
二.八大生命周期鉤子函數(shù):
函數(shù) | 調(diào)用時間 |
beforeCreate | vue實例初始化之前調(diào)用 |
created | vue實例初始化之后調(diào)用 |
beforeMount | 掛載到DOM樹之前調(diào)用 |
mounted | 掛載到DOM樹之后調(diào)用 |
beforeUpdate | 數(shù)據(jù)更新之前調(diào)用 |
updated | 數(shù)據(jù)更新之后調(diào)用 |
beforeDestroy | vue實例銷毀之前調(diào)用 |
destroyed | vue實例銷毀之后調(diào)用 |
下面是官方文檔里的生命周期圖,英語好的同學(xué)可以看看:
三.結(jié)合代碼了解:
先看案例基本代碼如下,后面通過如下代碼步驟演示一個對象從生成到被銷毀的過程各階段執(zhí)行的生命周期函數(shù)。注意show函數(shù)的作用。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://unpkg.com/vue/dist/vue.js"></script> </head> <body> <div id="app"> {{information}} </div> <script type="text/javascript"> //創(chuàng)建vue實例 var vm = new Vue({ el: '#app', data: { information: '北極光之夜。' } }) // 各個生命周期函數(shù)通過調(diào)用下面這個函數(shù)了解其所處的生命階段 function show(inf,obj){ console.log(inf); console.log("------------------------------------------"); console.log('獲取vue實例data里的數(shù)據(jù):'); console.log(obj.information); console.log("------------------------------------------"); console.log('掛載的對象,就是DOM:'); console.log(obj.$el); console.log("------------------------------------------"); console.log('頁面上已經(jīng)掛載的DOM:'); console.log(document.getElementById('app').innerHTML); } </script>
1. beforeCreate:
這個階段vue實例剛剛在內(nèi)存中創(chuàng)建,此時data和methods這些都沒初始化好。
在案例中添加beforeCreate鉤子函數(shù):
var vm = new Vue({ el: '#app', data: { information: '北極光之夜。' }, beforeCreate: function(){ // 傳入該階段簡介與this,this就是該階段的vue實例 show('vue實例初始化之前',this); } })
看運行結(jié)果:
可以看到,此時vue實例剛剛在內(nèi)存中創(chuàng)建,其它什么都undefined。
2.created:
這個階段vue實例在內(nèi)存中已經(jīng)創(chuàng)建好了,data和methods也能夠獲取到了,但是模板還沒編譯。
在案例中添加created鉤子函數(shù):
var vm = new Vue({ el: '#app', data: { information: '北極光之夜。' }, created: function(){ show('vue實例初始化之后',this); } })
看結(jié)果:
看到?jīng)],已經(jīng)知道data里的數(shù)據(jù)了。其它的話都沒。
3.beforeMount:
這個階段完成了模板的編譯,但是還沒掛載到頁面上。
在案例中添加鉤子函數(shù):
var vm = new Vue({ el: '#app', data: { information: '北極光之夜。' }, beforeMount: function(){ show('掛載之前',this); } })
看結(jié)果:
看到?jīng)],要掛載的對象都編譯好了,但是頁面的DOM樹還沒掛上去,這個階段頁面還沒能顯示出來。
4.mounted:
這個階段,模板編譯好了,也掛載到頁面中了,頁面也可以顯示了。
在案例中添加鉤子函數(shù):
var vm = new Vue({ el: '#app', data: { information: '北極光之夜。' }, mounted: function(){ show('掛載之后',this); } })
看結(jié)果:
5.beforeUpdate:
轉(zhuǎn)態(tài)更新之前執(zhí)行此函數(shù),此時data中數(shù)據(jù)的狀態(tài)值已經(jīng)更新為最新的,但是頁面上顯示的數(shù)據(jù)還是最原始的,還沒有重新開始渲染DOM樹。
先改變data里數(shù)據(jù):
vm.information = '南極光之夜';
在案例中添加鉤子函數(shù):
var vm = new Vue({ el: '#app', data: { information: '北極光之夜。' }, beforeUpdate: function(){ show('更新之前',this); } })
看結(jié)果:
看到?jīng)],vue實例里的數(shù)據(jù)已經(jīng)變成了南極光之夜。但是此階段頁面DOM節(jié)點上顯示的還是初始的數(shù)據(jù)北極光之夜。
6.updated:
這個階段是轉(zhuǎn)態(tài)更新完成后執(zhí)行此函數(shù),此時data中數(shù)據(jù)的狀態(tài)值是最新的,而且頁面上顯示的數(shù)據(jù)也是最新的,DOM節(jié)點已經(jīng)被重新渲染了。
在案例中添加鉤子函數(shù):
var vm = new Vue({ el: '#app', data: { information: '北極光之夜。' }, updated: function(){ show('更新之后',this); } })
看運行結(jié)果:
更新了,全都更新了~
7.beforeDestroy:
beforeDestroy階段處于vue實例被銷毀之前,當(dāng)然,這個階段vue實例還能用。
銷毀Vue實例:
vm.$destroy();
在案例中添加鉤子函數(shù):
var vm = new Vue({ el: '#app', data: { information: '北極光之夜。' }, beforeDestroy: function() { show('銷毀之前',this); } })
看效果:
8.destroyed:
這個階段在vue實例銷毀后調(diào)用,此時所有實例指示的所有東西都會解除綁定,事件監(jiān)聽器也都移除,子實例也被銷毀。
在案例中添加鉤子函數(shù):
var vm = new Vue({ el: '#app', data: { information: '北極光之夜。' }, destroyed: function() { show('銷毀之后',this); } })
看結(jié)果:
到此這篇關(guān)于一文搞懂Vue八大生命周期鉤子函數(shù)的文章就介紹到這了,更多相關(guān)Vue八大生命周期鉤子函數(shù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue啟動失敗報錯:Module?not?found:?Error:?Can‘t?resolve?&apos
這篇文章主要給大家介紹了關(guān)于Vue啟動失敗報錯:Module?not?found:?Error:?Can‘t?resolve?'less-loader'解決的相關(guān)資料,文中通過圖文介紹的非常詳細,需要的朋友可以參考下2023-03-03vue實現(xiàn)登錄頁面的驗證碼以及驗證過程解析(面向新手)
這篇文章主要介紹了vue實現(xiàn)登錄頁面的驗證碼以及驗證過程解析,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-08-08Spring Boot/VUE中路由傳遞參數(shù)的實現(xiàn)代碼
在路由時傳遞參數(shù),一般有兩種形式,一種是拼接在url地址中,另一種是查詢參數(shù)。這篇文章主要介紹了Spring Boot/VUE中路由傳遞參數(shù),需要的朋友可以參考下2018-03-03