本文主要对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方法:
执行结果:
到这里一个完整的生命周期执行完毕。