vue生命周期详：
beforeCreate 创建前状态:el 和 data 并未初始化;
created 创建完毕状态:完成了 data数据的初始化，el没有;
beforeMount 挂载前状:完成了 el 和 data 初始化，虚拟Dom已经配置，但页面还未显示;
mounted 挂载结束状:完成挂载，页面显示;
beforeUpdate 更新前状态:页面还未更新，但虚拟Dom已经配置;
updated 更新完成状态:页面更新;
beforeDestroy 销毁前状态;
destroyed 销毁完成状.
vue生命周期详解图：
bVEo3w.png
vue生命周期详解代码展示：
<!DOCTYPE html>
<html>
<head>
<title>vue生命周期</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 : "vue生命周期测试"
},
beforeCreate: function () {
console.group('beforeCreate 创建前状态===============》 el 和 data 并未初始化 ');
},
created: function () {
console.group('created 创建完毕状态===============》 完成了 data 数据的初始化，el没有');
},
beforeMount: function () {
console.group('beforeMount 挂载前状态===============》 完成了 el 和 data 初始化， 虚拟Dom已经配置，但页面还未显示');
},
mounted: function () {
console.group('mounted 挂载结束状态===============》 完成挂载，页面显示');
},
beforeUpdate: function () {
console.group('beforeUpdate 更新前状态===============》 页面还未更新，但虚拟Dom已经配置');
},
updated: function () {
console.group('updated 更新完成状态===============》页面更新');
},
beforeDestroy: function () {
console.group('beforeDestroy 销毁前状态===============》');
},
destroyed: function () {
console.group('destroyed 销毁完成状态===============》');
}
})
</script>
</body>
</html>
网友评论