本文主要对Vue2应用的生命周期进行测试，仅测试执行顺序，先不涉及el，template等具体细节，下面是官方文档给出的生命周期流程图：
先测试一下是否是按顺序执行的，看下面代码
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);
}
});
可以看到，并没有执行created后续的钩子方法。
加入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);
}
});
})();
依次执行到了mounted方法。
添加template属性：
运行结果：
并没有执行beforeUpdate，updated方法。
添加data属性：
执行结果：
依旧没有执行后续方法。
对data属性进行修改：
运行结果：
修改data属性后，可以看到依次执行到了updated方法。
最后调用$destroy方法：
执行结果：
到这里一个完整的生命周期执行完毕。
