Vue生命周期簡介：
Vue1.0+和Vue2.0在生命周期鉤子上的區(qū)別還是很大的，如下：
代碼驗證：
<!DOCTYPE html>
<html>
? ? ?<head>
? ? ? ? <meta charset="utf-8">
? ? ? ? <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:"Toney is a girl"
? ? ? ? ? ? },
? ? ? ? ? ? beforeCreate:function(){
? ? ? ? ? ? ? ? ?console.group('beforeCreat ?創(chuàng)建前的狀態(tài)======》'); ?//控制臺輸出的語句產(chǎn)生不同的層級嵌套關(guān)系
? ? ? ? ? ? ? ? console.log("%c%s","color:red","el : "+this.$el); ?//undefined, ?%c字符%s字符串
? ? ? ? ? ? ? ? console.log("%c%s","color:red","data : "+this.$data"); ?//undefined
? ? ? ? ? ? ? ? console.log("%c%s","color:red","message: "+this.message); ?//undefined
? ? ? ? ? ? },
? ? ? ? ? ?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("%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("%c%s","color:red","data : "+this.$data");? //已被初始化
? ? ? ? ? ? ? console.log("%c%s","color:red","message: "+this.message);? //已被初始化
? ? ? ? ? ?},
? ? ? ? ? beforeUpdate:function(){
? ? ? ? ? ? ? console.log("beforeUpdate 更新前狀態(tài)======》");
? ? ? ? ? ? ? console.log("%c%s","color:red","el:"+this.$el);
? ? ? ? ? ? ? console.log("%c%s","color:red","data:"+this.$data);
? ? ? ? ? ? ? console.log("%c%s","color:red","message:"+this.$message);
? ? ? ? ? },
? ? ? ? ? updated:function(){
? ? ? ? ? ? ?console.log("updated ?更新完成狀態(tài)======》");
? ? ? ? ? ? ?console.log("%c%s","color:red","el:"+this.$el);
? ? ? ? ? ? ?console.log("%c%s","color:red","data:"+this.$data);
? ? ? ? ? ? ?console.log("%c%s","color:red","message:"+this.$message);
? ? ? ? ? },
? ? ? ? ? beforeDestory:function(){
? ? ? ? ? ? ?console.log("beforeDestory 銷毀前狀態(tài)======》");
? ? ? ? ? ? ?console.log("%c%s","color:red","el:"+this.$el);
? ? ? ? ? ? ?console.log("%c%s","color:red","data:"+this.$data);
? ? ? ? ? ? ?console.log("%c%s","color:red","message:"+this.$message);
? ? ? ? ? },
? ? ? ? ? destoryed:function(){
? ? ? ? ? ? ? console.log("destoryed 銷毀完成狀態(tài)======》");
? ? ? ? ? ? ? console.log("%c%s","color:red","el:"+this.$el);
? ? ? ? ? ? ? console.log("%c%s","color:red","data:"+this.$data);
? ? ? ? ? ? ?console.log("%c%s","color:red","message:"+this.$message);
? ? ? ? ? }
? ? ? ? })
? ? ? </script>
? </body>?
關(guān)于更新
在chrome console中輸入命令：
app.message="I am a girl"
關(guān)于銷毀
在chrome console中輸入命令：
app.$destroy();
生命周期總結(jié)：
beforecreate: 例子：可以在這加個loading事件；
created：在這結(jié)束loading，還做一些初始化，實現(xiàn)函數(shù)自執(zhí)行丽惶；
mounted： 在這發(fā)起后端請求，拿回數(shù)據(jù)，配合路由鉤子做一些事情券盅；
beforeDestory： 你確認刪除XX嗎？?
destoryed ：當前組件已被刪除膛檀，清空相關(guān)內(nèi)容锰镀。
