本文主要對Vue2應(yīng)用的生命周期進行測試殴穴，僅測試執(zhí)行順序，先不涉及el影所，template等具體細節(jié)边酒，下面是官方文檔給出的生命周期流程圖：
先測試一下是否是按順序執(zhí)行的，看下面代碼?
?? ??? ???? var vm = new Vue({?? ??? ??? ????
??????????????? beforeCreate : function() {
?? ??? ??? ??? ??? ?console.log(arguments.callee);
?? ??? ??? ??? ?},
?? ??? ??? ??? ?created : function() {
?? ??? ??? ??? ??? ?console.log(arguments.callee);
?? ??? ??? ??? ?},
?? ??? ??? ??? ?beforeMount : function() {
?? ??? ??? ??? ??? ?console.log(arguments.callee);
?? ??? ??? ??? ?},
?? ??? ??? ??? ?mounted : function() {
?? ??? ??? ??? ??? ?console.log(arguments.callee);
?? ??? ??? ??? ?},
?? ??? ??? ??? ?beforeUpdate : function() {
?? ??? ??? ??? ??? ?console.log(arguments.callee);
?? ??? ??? ??? ?},
?? ??? ??? ??? ?updated : function() {
?? ??? ??? ??? ??? ?console.log(arguments.callee);
?? ??? ??? ??? ?},
?? ??? ??? ??? ?beforeDestroy : function(){
?? ??? ??? ??? ??? ?console.log(arguments.callee);
?? ??? ??? ??? ?},
?? ??? ??? ??? ?destroyed : function(){
?? ??? ??? ??? ??? ?console.log(arguments.callee);
?? ??? ??? ??? ?}
?? ??? ??? ?});
可以看到挟憔，并沒有執(zhí)行created后續(xù)的鉤子方法钟些。
加入el屬性：
(function(){
var vm = new Vue({
el : '.lifecycleAll',
beforeCreate : function() {
console.log(arguments.callee);
},
created : function() {
console.log(arguments.callee);
},
beforeMount : function() {
console.log(arguments.callee);
},
mounted : function() {
console.log(arguments.callee);
},
beforeUpdate : function() {
console.log(arguments.callee);
},
updated : function() {
console.log(arguments.callee);
} ,
beforeDestroy : function(){
console.log(arguments.callee);
},
destroyed : function(){
console.log(arguments.callee);
}
});
})();
依次執(zhí)行到了mounted方法。
添加template屬性：
運行結(jié)果：
并沒有執(zhí)行beforeUpdate绊谭，updated方法政恍。
添加data屬性：
執(zhí)行結(jié)果：
依舊沒有執(zhí)行后續(xù)方法。
對data屬性進行修改：
運行結(jié)果：
修改data屬性后达传，可以看到依次執(zhí)行到了updated方法篙耗。
最后調(diào)用$destroy方法：
執(zhí)行結(jié)果：
到這里一個完整的生命周期執(zhí)行完畢。
