vue生命周期鉤子該怎麼用?
剛剛學vue對於生命周期鉤子不是很理解,到底該怎麼用呢?而且什麼場景下用?能否舉一個具體的例子?
所謂「生命周期」,是指對象從構造函數開始執行(被創建)到被gc回收銷毀的整個存在的時期。
「鉤子」就是在某個階段給你一個做某些處理的機會。
&
&
&
&
&
&
&
&
&
{{ message }}&
&&
var app = new Vue({
el: "#app",
data: {
message : "monkeyWang is boy"
},
beforeCreate: function () {
console.group("beforeCreate 創建前狀態===============》");
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 創建完畢狀態===============》");
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 掛載前狀態===============》");
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 掛載結束狀態===============》");
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 更新前狀態===============》");
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 更新完成狀態===============》");
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 銷毀前狀態===============》");
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 銷毀完成狀態===============》");
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)
}
})
&
&
&
簡單的說,生命周期就像描述了一個人一生從出生到死亡的每個階段。寫了一段代碼,樓主可以拿去複製粘貼,體會一下每個周期的作用,這個生命周期是基於vue2.0的,vue1.0和2.0還是有挺多不同的地方,主要是2.0引入了virtual dom 。
都沒回答清楚嘛,人家問的是在什麼場景下才會用到這個姿勢好嘛
beforecreate : 可以在這加個loading事件
created :在這結束loading,還做一些初始化,實現函數自執行
mounted : 在這發起axios請求,拿回數據,配合路由鉤子做一些事情
beforeDestory: destoryed :當前組件已被刪除,清空相關內容
最近也在折騰Vue,你可以參考一下我寫的博客Vue生命周期 - 淺白 - 博客園
題主可以自己用vue_cli新建一個腳手架出來跑一下,自己也寫了篇短文vue_lifecycle
你把鉤子理解成回調函數就行
推薦閱讀:
※請問vue組件如何reload或者說vue-router如何刷新當前的route??
※Vue剛出不久,Vuex 就出來了,想請教下Vuex做了什麼事情?
※Vuejs .vue里怎麼引入第三方js和css呢比如jquery的輪播插件 要引入js和css?
※Vue中到底是什麼是父組件,什麼是子組件?
TAG:Vuejs |