本文通过测试展示了Vue2组件的生命周期执行顺序，从beforeCreate到destroyed各个阶段的触发情况。通过添加el、template、data属性并修改data，观察到created后的beforeMount、mounted、beforeUpdate、updated、beforeDestroy和destroyed等钩子函数的执行。当data改变时，会触发updated方法，而$destroy方法的调用标志着生命周期的结束。
本文主要对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方法：
执行结果：
到这里一个完整的生命周期执行完毕。
1187
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
