Vue生命周期深入分析總結
一、生命周期圖
官網(wǎng)圖片，先了解一下流程
二、生命周期三個組成部分
第一節(jié)-初始化
beforeCreate
初始化之后，數(shù)據(jù)觀測(data observer) 和 event/watcher 事件配置之前被調用。
vue實例中的el，data，data中的message都為undefined。
created
實例已經(jīng)創(chuàng)建完成之后被調用。在這一步，實例已完成以下的配置：數(shù)據(jù)觀測(data observer)，屬性和方法的運算， watch/event 事件回調。然而，掛載階段還沒開始，$el 屬性目前不可見。
主要應用：調用數(shù)據(jù)，調用方法，調用異步函數(shù)
beforeMount
載入前（完成了data和el數(shù)據(jù)初始化），可是頁面中的內(nèi)容仍是vue中的占位符，data中的message信息沒有被掛在到Bom節(jié)點中，在這里能夠在渲染前最后一次更改數(shù)據(jù)的機會，不會觸發(fā)其余的鉤子函數(shù)，通常能夠在這里作初始數(shù)據(jù)。這個階段操作DOM是不奏效的。
mounted
載入后html已經(jīng)渲染(ajax請求能夠放在這個函數(shù)中)，把vue實例中的data里的message掛載到BOM節(jié)點中去。
第二節(jié)-更新狀態(tài)
beforeUpdate
狀態(tài)完成更新之前（data中數(shù)據(jù)已發(fā)生變化，view層數(shù)據(jù)變化之前），后vue的虛擬dom機制會從新構建虛擬dom與上一次的虛擬dom樹利用diff算法進行對比以后從新渲染。
updated
數(shù)據(jù)已經(jīng)更改完成，dom也從新render完成。
第三節(jié)-銷毀實例
Vm.$destroy()：銷毀后自定義事件會失效，但原生DOM事件依然有效。銷毀后會調用下面兩個鉤子。
beforeDestroy
銷毀前執(zhí)行（$destroy方法被調用的時候就會執(zhí)行）,通常在這里善后:清除計時器、清除非指令綁定的事件等等…’)。
destroyed
銷毀后 （Dom元素存在，只是再也不受vue控制）,卸載watcher，事件監(jiān)聽，子組件
簡單的對生命周期總結
常用的生命周期鉤子
1.mounted: 發(fā)送ajax請求、啟動定時器、綁定自定義事件、訂閱消息等【初始化操作】。
2.beforeDestroy: 清除定時器、解綁自定義事件、取消訂閱消息等【收尾工作】。
關于銷毀Vue實例
1.銷毀后借助Vue開發(fā)者工具看不到任何信息。
2.銷毀后自定義事件會失效，但原生DOM事件依然有效。
3.一般不會在beforeDestroy操作數(shù)據(jù)，因為即便操作數(shù)據(jù)，也不會再觸發(fā)更新流程了。
三、代碼測試生命周期
后面附有解釋
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue實例的生命周期</title>
</head>
<body>
<div id="app">
<h1>測試生命周期</h1>
<div>{{msg}}</div>
<hr>
<h3>測試beforeUpdate和update兩個鉤子函數(shù)</h3>
<button @click="handlerUpdate">更新數(shù)據(jù)</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
msg: "12345"
},
methods: {
handlerUpdate() {
this.msg=this.msg.split("").reverse().join("")
}
},
//按照示意圖依次調用
beforeCreate(){
console.log("調用了beforeCreate鉤子函數(shù)");
},
created(){
console.log("調用了created鉤子函數(shù)");
},
beforeMount(){
console.log('調用了beforeMount鉤子函數(shù)');
},
mounted(){
console.log('調用了mounted鉤子函數(shù)');
},
beforeUpdate(){
console.log("調用了beforeUpdate鉤子函數(shù)")
},
updated(){
console.log("調用了updated鉤子函數(shù)");
},
beforeDestroy(){
console.log("調用了beforeDestroy鉤子函數(shù)");
},
destroyed(){
console.log("調用了destroyed鉤子函數(shù)");
}
})
</script>
</body>
</html>
初始化頁面依次調用了：
- 調用了beforeCreate鉤子函數(shù)
- 調用了created鉤子函數(shù)
- 調用了beforeMount鉤子函數(shù)
- 調用了mounted鉤子函數(shù)
點擊更新數(shù)據(jù)后：
12345變成了54321，此時調用了：
- 調用了beforeUpdate鉤子函數(shù)
- 調用了updated鉤子函數(shù)
打開F12控制臺 直接輸入app.$destroy()主動銷毀Vue實例調用：
- 調用了beforeDestroy鉤子函數(shù)
- 調用了destroyed鉤子函數(shù)
四、再探究
beforeCreate之前
初始化鉤子函數(shù)和生命周期
beforeCreate和created鉤子函數(shù)間的生命周期
在beforeCreate和created之間，進行數(shù)據(jù)觀測(data observer) ，也就是在這個時候開始監(jiān)控data中的數(shù)據(jù)變化了，同時初始化事件。
created鉤子函數(shù)和beforeMount間的生命周期
對于created鉤子函數(shù)和beforeMount有判斷：
el選項對生命周期影響
1.有el選項
new Vue({
el: '#app',
beforeCreate: function () {
console.log('調用了beforeCreat鉤子函數(shù)')
},
created: function () {
console.log('調用了created鉤子函數(shù)')
},
beforeMount: function () {
console.log('調用了beforeMount鉤子函數(shù)')
},
mounted: function () {
console.log('調用了mounted鉤子函數(shù)')
}
})
2.無el選項
new Vue({
beforeCreate: function () {
console.log('調用了beforeCreat鉤子函數(shù)')
},
created: function () {
console.log('調用了created鉤子函數(shù)')
},
beforeMount: function () {
console.log('調用了beforeMount鉤子函數(shù)')
},
mounted: function () {
console.log('調用了mounted鉤子函數(shù)')
}
})
證明沒有el選項，則停止編譯，也意味著暫時停止了生命周期。生命周期到created鉤子函數(shù)就結束了。而當我們不加el選項，
但是手動執(zhí)行vm.$mount(el)方法的話，也能夠使暫停的生命周期進行下去，例如：
var app = new Vue({
beforeCreate: function () {
console.log('調用了beforeCreat鉤子函數(shù)')
},
created: function () {
console.log('調用了created鉤子函數(shù)')
},
beforeMount: function () {
console.log('調用了beforeMount鉤子函數(shù)')
},
mounted: function () {
console.log('調用了mounted鉤子函數(shù)')
}
})
app.$mount('#app')
template
同時使用template和HTML，查看優(yōu)先級：
<h1>測試template和HTML的優(yōu)先級</h1>
<div id="app">
<p>HTML優(yōu)先</p>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
msg:"template優(yōu)先"
},
template:"<p>{{msg}}</p>",
});
</script>結果：
結論
- 如果Vue實例對象中有template參數(shù)選項，則將其作為模板編譯成render函數(shù)
- 如果沒有template參數(shù)選項，則將外部的HTML作為模板編譯（template），也就是說，template參數(shù)選項的優(yōu)先級要比外部的HTML高
- 如果1,2條件都不具備，則報錯
注意
Vue需要通過el去找對應的template，Vue實例通過el的參數(shù)，首先找自己有沒有template，如果沒有再去找外部的html，找到后將其編譯成render函數(shù)。
也可以直接調用render選項，優(yōu)先級：render函數(shù)選項 > template參數(shù) > 外部HTML。
beforeMount和mounted鉤子函數(shù)間的生命周期
beforeMount
載入前（完成了data和el數(shù)據(jù)初始化），但是頁面中的內(nèi)容還是vue中的占位符，data中的message信息沒有被掛在到Dom節(jié)點中，在這里可以在渲染前最后一次更改數(shù)據(jù)的機會，不會觸發(fā)其他的鉤子函數(shù)，一般可以在這里做初始數(shù)據(jù)的獲取。
Mount
載入后html已經(jīng)渲染(ajax請求可以放在這個函數(shù)中)，把vue實例中的data里的message掛載到DOM節(jié)點中去
這里兩個鉤子函數(shù)間是載入數(shù)據(jù)。
beforeUpdate鉤子函數(shù)和updated鉤子函數(shù)間的生命周期
在Vue中，修改數(shù)據(jù)會導致重新渲染，依次調用beforeUpdate鉤子函數(shù)和updated鉤子函數(shù)
如果待修改的數(shù)據(jù)沒有載入模板中，不會調用這里兩個鉤子函數(shù)
var app = new Vue({
el: '#app',
data: {
msg: 1
},
template: '<div id="app"><p></p></div>',
beforeUpdate: function () {
console.log('調用了beforeUpdate鉤子函數(shù)')
},
updated: function () {
console.log('調用了updated鉤子函數(shù)')
}
})
app.msg = 2
如果綁定了數(shù)據(jù)，會調用兩個鉤子函數(shù)：
<h1>測試有數(shù)據(jù)綁定修改數(shù)據(jù)，鉤子函數(shù)調用情況</h1>
<div id="app">
</div>
<script>
var app = new Vue({
el:"#app",
template:"<p>{{msg}}</p>",
data:{
msg:"原數(shù)據(jù)"
},
beforeUpdate: function () {
console.log("調用了beforeUpdate鉤子函數(shù)")
},
updated: function () {
console.log("調用了updated鉤子函數(shù)");
},
});
app.msg = "數(shù)據(jù)被修改了";
</script>結果：
注意只有寫入模板的數(shù)據(jù)才會被追蹤
beforeDestroy和destroyed鉤子函數(shù)間的生命周期
beforeDestroy
銷毀前執(zhí)行（$destroy方法被調用的時候就會執(zhí)行）,一般在這里善后:清除計時器、清除非指令綁定的事件等等…’)
destroyed
銷毀后 （Dom元素存在，只是不再受vue控制）,卸載watcher，事件監(jiān)聽，子組件
總結
- beforecreate : 可以在這加個loading事件
- created ：在這結束loading，還做一些初始數(shù)據(jù)的獲取，實現(xiàn)函數(shù)自-執(zhí)行
- mounted ： 在這發(fā)起后端請求，拿回數(shù)據(jù)，配合路由鉤子做一些事情
- beforeDestroy： 你確認刪除XX嗎？
- destroyed ：當前組件已被刪除，清空相關內(nèi)容
到此這篇關于Vue生命周期深入分析總結的文章就介紹到這了,更多相關Vue生命周期內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
vue項目中vue-echarts講解及常用圖表實現(xiàn)方案(推薦)
這篇文章主要介紹了vue項目中vue-echarts講解及常用圖表方案實現(xiàn),主要針對代碼示例中的內(nèi)容進行問題講解，詳細代碼在文章中給大家提到，需要的朋友可以參考下2022-09-09
vue實踐---根據(jù)不同環(huán)境,自動轉換請求的url地址操作
這篇文章主要介紹了vue實踐---根據(jù)不同環(huán)境,自動轉換請求的url地址操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
vue打包chunk-vendors.js文件過大導致頁面加載緩慢的解決
這篇文章主要介紹了vue打包chunk-vendors.js文件過大導致頁面加載緩慢的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
使用Vue純前端實現(xiàn)發(fā)送短信驗證碼并實現(xiàn)倒計時
在實際的應用開發(fā)中,涉及用戶登錄驗證、密碼重置等場景時,通常需要前端實現(xiàn)發(fā)送短信驗證碼的功能,以提升用戶體驗和安全性,以下是一個簡單的前端實現(xiàn),演示了如何在用戶點擊發(fā)送驗證碼按鈕時觸發(fā)短信驗證碼的發(fā)送,并開始一個倒計時2024-04-04
這篇文章主要介紹了Vue中的循環(huán)及修改差值表達式的方法，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-08-08
在Vue中Refs是對DOM元素或已安裝到DOM的其他組件實例的引用,下面這篇文章主要給大家介紹了關于Vue3中refs使用的相關資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-08-08
今天小編就為大家分享一篇在Vue項目中,防止頁面被縮放和放大示例，具有很好的參考 價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
這篇文章主要介紹了vue引入css文件導致全局污染的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了前端vue如何使用高德地圖，幫助大家利用vue調用其他key，完成需求，感興趣的朋友可以了解下2020-11-11
詳解vue-cli 本地開發(fā)mock數(shù)據(jù)使用方法
這篇文章主要介紹了詳解vue-cli 本地開發(fā)mock數(shù)據(jù)使用方法，如果后端接口尚未開發(fā)完成，前端開發(fā)一般使用mock數(shù)據(jù)。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05