- 概述
vue用了一陣子塞赂，對(duì)鉤子函數(shù)和生命周期只是停留在簡(jiǎn)單的使用方库，不曉得為什么吕嘀，接下來(lái)將更深入的了解一下，話不多說(shuō)翎卓，走起 - Vue的生命周期簡(jiǎn)介
生命周期.png
lifecycle.png - 其實(shí)吧契邀，生命周期可以簡(jiǎn)單分為8部分
beforeCreate（創(chuàng)建前）,
created（創(chuàng)建后）,
beforeMount(載入前),
mounted（載入后）,
beforeUpdate（更新前）,
updated（更新后）,
beforeDestroy（銷毀前）,
destroyed（銷毀后） - 話不多說(shuō) 上代碼
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="https://cdn.jsdelivr.net/vue/2.1.3/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
message : "xuxiao is boy"
},
beforeCreate: function () {
console.group('beforeCreate 創(chuàng)建前狀態(tài)===============》');
console.log("%c%s", "color:red" , "el : " + this.$el); //undefined
console.log("%c%s", "color:red","data : " + this.$data); //undefined
console.log("%c%s", "color:red","message: " + this.message)
},
created: function () {
console.group('created 創(chuàng)建完畢狀態(tài)===============》');
console.log("%c%s", "color:red","el : " + this.$el); //undefined
console.log("%c%s", "color:red","data : " + this.$data); //已被初始化
console.log("%c%s", "color:red","message: " + this.message); //已被初始化
},
beforeMount: function () {
console.group('beforeMount 掛載前狀態(tài)===============》');
console.log("%c%s", "color:red","el : " + (this.$el)); //已被初始化
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data); //已被初始化
console.log("%c%s", "color:red","message: " + this.message); //已被初始化
},
mounted: function () {
console.group('mounted 掛載結(jié)束狀態(tài)===============》');
console.log("%c%s", "color:red","el : " + this.$el); //已被初始化
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data); //已被初始化
console.log("%c%s", "color:red","message: " + this.message); //已被初始化
},
beforeUpdate: function () {
console.group('beforeUpdate 更新前狀態(tài)===============》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message);
},
updated: function () {
console.group('updated 更新完成狀態(tài)===============》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message);
},
beforeDestroy: function () {
console.group('beforeDestroy 銷毀前狀態(tài)===============》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message);
},
destroyed: function () {
console.group('destroyed 銷毀完成狀態(tài)===============》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message)
}
})
</script>
</body>
</html>
打開(kāi)瀏覽器控制臺(tái)，會(huì)發(fā)現(xiàn)
beforecreate:el和data并未初始化
created:完成了data數(shù)據(jù)的初始化莲祸，el沒(méi)有
beforeMount ：完成了el和data的初始化
mounted ：完成了掛載
我們經(jīng)常說(shuō)的先挖坑蹂安，其實(shí)是vue虛擬dom，在mounted時(shí)才填坑的
update : 當(dāng)我們使用其他方法修改了數(shù)據(jù)锐帜，vue會(huì)觸發(fā)update
destroy : 使用destroy之后田盈，dom仍然存在，但是不受vue控制了
- 常見(jiàn)鉤子函數(shù)的使用
beforecreate : 舉個(gè)栗子：可以在這加個(gè)loading事件
created ：在這結(jié)束loading缴阎，還做一些初始化允瞧，實(shí)現(xiàn)函數(shù)自執(zhí)行,也可以向后臺(tái)請(qǐng)求數(shù)據(jù)
mounted ： 在這發(fā)起后端請(qǐng)求，拿回?cái)?shù)據(jù)，配合路由鉤子做一些事情
beforeDestory： 你確認(rèn)刪除XX嗎述暂？
destoryed ：當(dāng)前組件已被刪除痹升，清空相關(guān)內(nèi)容
