前言
通過上一章的學(xué)習(xí)融欧，我們已經(jīng)初步的了解了vue到底是什么東西卦羡，可以干什么虹茶，而這一篇博客主要介紹vue的生命周期和它常用的鉤子函數(shù)，如果有學(xué)過java的園友可能有接觸到在學(xué)習(xí)servlet的時候?qū)W過servlet的生命周期servlet 加載--->實例化--->服務(wù)--->銷毀,對于vue的而言他也有自己的生命周期董济，那么一起來看看吧要门！
本章目標
- 學(xué)會并了解vue的生命周期和鉤子函數(shù)
- 學(xué)會使用手動掛載和調(diào)用事件
vue的生命周期和鉤子函數(shù)
其實在提到vue的生命周期和鉤子函數(shù)的時候，有的人認為常用的鉤子函數(shù)有10個封豪，也有的人認為是8個炒瘟，無論是10個還是8個對于我而言都是一樣的，我們主要講解8個vue的鉤子函數(shù)缘琅。首先來一波官網(wǎng)的對于vue生命周期的圖解
這一張圖關(guān)于vue的生命周期已經(jīng)講解的特別到位了廓推，但是光靠這一張圖還不足于了解它的生命周期樊展，我們需要實踐一下，有句古話說的好专缠，實踐是檢驗道理的唯一標準藤肢，介紹一下vue的鉤子函數(shù)。
beforeCreate(實例創(chuàng)建前)
實例組件剛開始創(chuàng)建省骂，元素dom和數(shù)據(jù)都還沒有初始化
應(yīng)用場景：可以在這加個loading事件
created(實例創(chuàng)建后)
數(shù)據(jù)data已經(jīng)初始化完成最住，方法也已經(jīng)可以調(diào)用，但是dom為渲染轧粟，在這個周期里面如果進行請求是可以改變數(shù)據(jù)并渲染，由于dom未掛載通惫，請求過多或者占用時間過長會導(dǎo)致頁面線上空白
應(yīng)用場景：在這結(jié)束loading混蔼，還做一些初始化，實現(xiàn)函數(shù)自執(zhí)行
beforeMoute(元素掛載前)
dom未完成掛載遵湖，數(shù)據(jù)初始化完成晚吞，但是數(shù)據(jù)的雙向綁定還是{{}},這是因為vue采用了虛擬dom技術(shù)。
mouted(元素掛載后)
數(shù)據(jù)和dom都完成掛載迁沫，在上一個周期占位的數(shù)據(jù)把值渲染進去闷盔，一般請求會放在這個地方，因為這邊請求改變數(shù)據(jù)之后剛好能渲染牡整。
beforeUpdate(實例更新前)
只要是頁面數(shù)據(jù)改變了都會觸發(fā)溺拱，數(shù)據(jù)更新之前，頁面數(shù)據(jù)還是原來的數(shù)據(jù)沐扳，當你請求賦值一個數(shù)據(jù)的時候就會執(zhí)行這個周期句占，如果沒有數(shù)據(jù)改變不執(zhí)行。
updated(實例更新后)
只要是頁面數(shù)據(jù)改變了都會觸發(fā)杨拐，數(shù)據(jù)更新完畢擂啥，頁面的數(shù)據(jù)是更新完成的，beforeUpdated和updated要謹慎使用屋吨，因為頁面更新數(shù)據(jù)的時候都會觸發(fā)，在這里操作數(shù)據(jù)很影響性能和死循環(huán)鳍徽。
beforeDestory(實例銷毀前)
實例銷毀之前調(diào)用渊胸，在這一步，實例仍然完全可用。
destory(實例銷毀后)
vue實例銷毀后調(diào)用切厘，調(diào)用后懊缺，vue實例指示的所有內(nèi)容都會解除綁定，所有的事件監(jiān)聽器都會被移除遗座，所有的子實例也會被銷毀俊扳。
實例一
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue的生命周期實例一</title>
</head>
<body>
<div id="app">
<input type="text" v-model="msg" />
{{msg}}
</div>
<button onclick="destory()">銷毀</button>
<script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
const vm=new Vue({
el:'#app',
data:{
msg:'vue'
},
beforeCreate(){
console.log('vue實例創(chuàng)建前:'+this.msg+','+this.$el);
// 數(shù)據(jù)data和dom都還沒有初始化
},
created(){
console.log('vue實例創(chuàng)建后:'+this.msg+','+this.$el);
//數(shù)據(jù)dom初始化完成馋记，dom還沒有初始化完成
},
beforeMount(){
console.log('元素掛載前:');
console.log(this.$el);
},
mounted(){
console.log('元素掛載后:');
console.log(this.$el);
},
beforeUpdate(){
console.log('實例更新前');
console.log(this.msg);
console.log(this.$el);
},
updated(){
console.log('實例更新后');
console.log(this.msg);
console.log(this.$el);
},
beforeDestroy(){
console.log('實例銷毀前');
console.log(this.msg);
},
destroyed(){
console.log('實例銷毀后');
console.log(this.msg);
}
});
function destory(){
vm.$destroy();
}
</script>
</body>
</html>
結(jié)果:
實例二
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue的生命周期實例二</title>
</head>
<body>
<div id="app">
{{name}}
</div>
<button onclick="destory()">銷毀實例</button>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
const vm=new Vue({
el:'#app',
data:{
name:'一只流浪的kk',
age:18
},
beforeCreate(){
console.log('============實例創(chuàng)建前=============');
console.log(this.$el); //undefined
console.log(this.$data);//undefined
},
created(){
console.log('============實例創(chuàng)建后=============');
console.log(this.$el);
console.log(JSON.stringify(this.$data));
},
beforeMount(){
console.log('============元素掛載前=============');
console.log(this.$el);
console.log(JSON.stringify(this.$data));
},
mounted(){
console.log('============元素掛載后=============');
console.log(this.$el);
console.log(JSON.stringify(this.$data));
},
beforeUpdate(){
console.log('============實例更新前=============');
console.log(this.$el);
console.log(JSON.stringify(this.$data));
},
updated(){
console.log('============實例更新后=============');
console.log(this.$el);
console.log(JSON.stringify(this.$data));
},
beforeDestroy(){
console.log('============實例銷毀前=============');
console.log(this.$el);
console.log(JSON.stringify(this.$data));
},
destroyed(){
console.log('============實例銷毀后=============');
console.log(this.$el);
console.log(JSON.stringify(this.$data));
}
});
function destory(){
vm.$destroy();
}
</script>
</body>
</html>
總結(jié)
- beforeCreate() : 此時$el、data 的值都為undefined,即el 和 data 并未初始化 畜隶。
- create(): 此時可以拿到data的值号胚，但是$el依舊為undefined，即data完成了 數(shù)據(jù)的初始化嗡综，el沒有杜漠。
- beforeMounte(): $el的值為“虛擬”的元素節(jié)點,dom未完成掛載察净，數(shù)據(jù)初始化完成盼樟，但是數(shù)據(jù)的雙向綁定還是{{}},這是因為vue采用了虛擬dom技術(shù)。
-
mouted(): 數(shù)據(jù)和dom都完成掛載译秦，在上一個周期占位的數(shù)據(jù)把值渲染進去击碗，一般請求會放在這個地方，因為這邊請求改變數(shù)據(jù)之后剛好能渲染阁吝。
image
vue實例的手動掛載和調(diào)用事件
- vm.＄mount( [elementOrSelector] ) 如果 Vue 實例在實例化時沒有收到 el 選項械拍，則它處于“未掛載”狀態(tài)，沒有關(guān)聯(lián)的 DOM 元素甲馋∑穑可以使用 vm.＄mount() 手動地掛載一個未掛載的實例，學(xué)習(xí)手動掛載和調(diào)用事件之前共屈，我提取了一些vue實例常用的屬性和方法党窜，帶有前綴 ＄ 便于與代理的data區(qū)分。
- vm.＄el：類型（HTMLElement）掛載元素矾削，Vue實例的DOM根元素豁护；即vm.$el===document.getElementById('節(jié)點')，注意：相等的情況必須是實例創(chuàng)建之后才行断部，也就是created之后班缎。
- vm.＄data：類型（Object）她渴，Vue實例觀察的數(shù)據(jù)對象蔑祟。
- vm.＄props：類型（Object），當前組件接收到的 props 對象苛败。Vue 實例代理了- 對其 props 對象屬性的訪問径簿。
- vm.＄options：類型（Object），用于當前 Vue 實例的初始化選項儡遮。需要在選項中包含自定義屬性時會有用處暗赶。
- vm.＄parent：類型（Vue實例）肃叶，父實例，如果當前實例有的話岳锁。
- vm.＄root：類型（Vue實例）蹦魔，當前組件樹的根 Vue 實例。如果當前實例沒有父實例乒躺，此實例將會是其自己低缩。
- vm.＄children：類型（Array(Vue實例)），當前實例的直接子組件讳推。需要注意
children 來進行數(shù)據(jù)綁定，考慮使用一個數(shù)組配合 v-for 來生成子組件镰吆，并且使用 Array 作為真正的來源跑慕。
官網(wǎng)地址：https://cn.vuejs.org/v2/api/
接下來是介紹手動掛載和調(diào)用事件的常用方法，共有三個
var MyComponent = Vue.extend({
template: '<div>Hello!</div>'
})
// 創(chuàng)建并掛載到 #app (會替換 #app)
new MyComponent().＄mount('#app')
// 同上
new MyComponent({ el: '#app' })
// 或者牢硅，在文檔之外渲染并且隨后掛載
var component = new MyComponent().＄mount()
document.getElementById('app').appendChild(component.＄el)
示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>手動掛載和調(diào)用事件</title>
</head>
<body>
<div id="app">
</div>
<button onclick="hanlderOne()">手動掛載方式一</button>
<button onclick="hanlderTwo()">手動掛載方式二</button>
<button onclick="hanlderThree()">手動掛載方式三</button>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
const vm=new Vue({
data:{
name:'vue'
},
template:'<h2>{{name}}</h2>'
})
function hanlderOne(){
//方法一减余，手動掛載到指定的dom
vm.$mount("#app");
}
function hanlderTwo(){
//手動掛載惩系，觸發(fā)編譯
vm.$mount();
document.getElementById('app').appendChild(vm.$el);
}
function hanlderThree(){
//擴展一個新的vue構(gòu)造器
const component=Vue.extend({
template:'<h2>{{name}}</h2>'
});
const a=new component({
data:{
name:'vue'
},
el:'#app'
})
}
</script>
</body>
</html>
結(jié)果：
vm.＄destroy() 完全銷毀一個實例堡牡。清理它與其它實例的連接，解綁它的全部指令及事件監(jiān)聽器擦剑，這個方法我們在示例中有使用過芥颈，大家可以查看前面的示例。
