vue生命周期
Vue實例的生命周期
就像一個人煎娇，從出生到死亡會經(jīng)歷童年二庵、少年、青年缓呛、中年催享、老年各個階段。如果你是上帝哟绊，你可以讓他童年做著無憂無慮的事情因妙、少年用功讀書、青年到處游學(xué)票髓、中年娶妻生子攀涵、老年兒孫滿堂。
Vue.js讓你有了上帝之手洽沟，可以操縱Vue實例的整個生命周期以故。
一、生命周期
每個 Vue 實例在被創(chuàng)建之前都要經(jīng)過一系列的初始化過程裆操。
-
例如怒详，實例需要：
- 配置數(shù)據(jù)觀測(data observer)
- 編譯模版、掛載實例到 DOM
- 在數(shù)據(jù)變化時更新 DOM
-
在這個過程中跷车，實例也會調(diào)用一些生命周期鉤子 棘利，這就給我們提供了執(zhí)行自定義邏輯的機(jī)會。比如朽缴，created 這個鉤子在實例被創(chuàng)建之后被調(diào)用：
var vm = new Vue({ data: { a: 1 }, created: function () { // `this` 指向 vm 實例 console.log('a is: ' + this.a) } }) // -> "a is: 1" 也有一些其它的鉤子，在實例生命周期的不同階段調(diào)用水援，如 mounted密强、 updated 、destroyed 蜗元。鉤子的 this 指向調(diào)用它的 Vue 實例或渤。
二、Vue1.0-實例生命周期圖示
vue1.0生命周期.png
- 生命周期中鉤子函數(shù)介紹：
beforeCreate: function () {
// 在實例初始化之后奕扣，數(shù)據(jù)觀測(data observer)
和 event/watcher 事件配置之前被調(diào)用薪鹦。
},
created: function () {
// 實例已經(jīng)創(chuàng)建完成之后被調(diào)用。
在這一步惯豆，實例已完成以下的配置：數(shù)據(jù)觀測(data observer)池磁，
屬性和方法的運(yùn)算， watch/event 事件回調(diào)楷兽。
然而地熄，掛載階段還沒開始，$el 屬性目前不可見芯杀。
},
beforeCreate: function () {
// 在實例初始化之后端考，數(shù)據(jù)觀測(data observer) 和 event/watcher
事件配置之前被調(diào)用雅潭。
},
mounted: function () {
// el 被新創(chuàng)建的 vm.$el 替換，并掛載到實例上去之后調(diào)用該鉤子却特。
如果 root 實例掛載了一個文檔內(nèi)元素扶供，當(dāng) mounted 被調(diào)用時
vm.$el 也在文檔內(nèi)。
},
beforeUpdate: function () {
// 數(shù)據(jù)更新時調(diào)用裂明，發(fā)生在虛擬 DOM 重新渲染和打補(bǔ)丁之前诚欠。
// 你可以在這個鉤子中進(jìn)一步地更改狀態(tài)，這不會觸發(fā)附加的重渲染過程漾岳。
},
update: function () {
// 由于數(shù)據(jù)更改導(dǎo)致的虛擬 DOM 重新渲染和打補(bǔ)丁轰绵，在這之后會調(diào)用該鉤子。
// 當(dāng)這個鉤子被調(diào)用時尼荆，組件 DOM 已經(jīng)更新左腔，
所以你現(xiàn)在可以執(zhí)行依賴于 DOM 的操作。然而在大多數(shù)情況下捅儒，
你應(yīng)該避免在此期間更改狀態(tài)液样，因為這可能會導(dǎo)致更新無限循環(huán)。
},
// <keep-alive> 包裹動態(tài)組件時巧还，會緩存不活動的組件實例鞭莽，而不是銷毀它們。
activated: function () {
// keep-alive 組件激活時調(diào)用麸祷。
},
deactivated: function () {
// keep-alive 組件停用時調(diào)用澎怒。
},
beforeDestroy: function () {
// 實例銷毀之前調(diào)用。在這一步阶牍，實例仍然完全可用喷面。
},
destroyed: function () {
// Vue 實例銷毀后調(diào)用。調(diào)用后走孽，Vue 實例指示的所有東西都會解綁定惧辈，
所有的事件監(jiān)聽器會被移除，所有的子實例也會被銷毀磕瓷。
}
- 上圖中比較常用的鉤子：
created：vue實例被生成后的一個生命周期鉤子函數(shù)盒齿。(頁面初始化數(shù)據(jù)加載一般寫這里);
beforeCreate：給個loading界面 created撤銷loading;
beforeDestory：當(dāng)移除當(dāng)前組件的時候調(diào)用
destoryed：當(dāng)前組件已被刪除，清空相關(guān)內(nèi)容
mounted ： 在這發(fā)起后端請求困食，拿回數(shù)據(jù)边翁，配合路由鉤子做一些事情
<script>
window.onload = function () {
var vm=new Vue({
el:'body',
data:{
msg:'well'
},
created:function(){
alert('實例已經(jīng)創(chuàng)建');
},
beforeCompile:function(){
alert('編譯之前');
},
compiled:function(){
alert('編譯之后');
},
ready:function(){
alert('插入到文檔中');
},
beforeDestroy:function(){
alert('銷毀之前');
},
destroyed:function(){
alert('銷毀之后');
}
});
/*點擊頁面銷毀vue對象*/
document.onclick=function(){
vm.$destroy();
};
}
</script>
三、Vue2.0-實例生命周期圖示
vue2.0生命周期.png
