- 概述
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)容