关于Vue实例的生命周期
闲话不多说先上图：
下面用代码验证一下：
<!DOCTYPE html>
<html>
<head>
<title>vue生命周期</title>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app', /** el 为 ELEMENT */
data: {
message : "vue生命周期测试"
},
beforeCreate: function () {
arter('beforeCreate 创建前状态==============> el 和 data 并未初始化 ');
},
created: function () {
alert('created 创建完毕状态==============> 完成了 data 数据的初始化，el没有');
},
beforeMount: function () {
alert('beforeMount 挂载前状态==============> 完成了 el 和 data 初始化， 虚拟Dom已经配置，但页面还未显示');
},
mounted: function () {
alert('mounted 挂载结束状态==============> 完成挂载，页面显示');
},
beforeUpdate: function () {
alert('beforeUpdate 更新前状态==============> 页面还未更新，但虚拟Dom已经配置');
},
updated: function () {
alert('updated 更新完成状态==============>页面更新');
},
beforeDestroy: function () {
alert('beforeDestroy vue销毁前状态');
},
destroyed: function () {
alert('destroyed vue被销毁');
}
})
</script>
</body>
</html>剩下就是实现你自己的方法了！