Vue2.0 探索之路——生命周期和鉤子函數的一些理解
阿新 • • 發佈：2018-11-03
ram F12 一些事 key 版本 net 就是 pre 簡單
前言
在使用vue一個多禮拜後，感覺現在還停留在初級階段，雖然知道怎麽和後端做數據交互，但是對於mounted這個掛載還不是很清楚的。放大之，對vue的生命周期不甚了解。只知道簡單的使用，而不知道為什麽，這對後面的踩坑是相當不利的。
因為我們有時候會在幾個鉤子函數裏做一些事情，什麽時候做，在哪個函數裏做，我們不清楚。
於是我開始先去搜索，發現vue2.0的生命周期沒啥文章。大多是1.0的版本介紹。最後還是找到一篇不錯的（會放在最後）
vue生命周期簡介
咱們從上圖可以很明顯的看出現在vue2.0都包括了哪些生命周期的函數了。
生命周期探究
對於執行順序和什麽時候執行，看上面兩個圖基本有個了解了。下面我們將結合代碼去看看鉤子函數的執行。
ps:下面代碼可以直接復制出去執行
<!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 創建前狀態===============》‘);
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)
}
})
</script>
</body>
</html>