生命周期钩子：生命周期函数（生命周期事件）
image.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../../modules/vue/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<p>{{msg}}</p>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
msg: "123",
},
methods:{},
beforeCreate(){
console.log("【实例创建】beforeCreate：第一个生命周期函数，会在实例创建之前执行，执行的时候，data中的参数和methods中的方法都还没有被初始化")
},
create(){
console.log("【实例创建】create：第二个生命周期函数，执行的时候，data中的参数和methods中的方法已经被初始化")
},
beforeMount(){
console.log("【实例创建】beforeMount：第三个生命周期函数，模板已经在内存中编辑完成了，但是尚未把模板放到页面中")
},
mounted(){
console.log("【实例创建】mounted：第四个生命周期函数，实例创建期间最后一个周期函数，mounted一直留在内存中，内存中的模板已经真实挂在页面中，用户已经可以看到渲染好的页面，如果要通难过插件操作页面上的dom节点，最早要在mounted里进行")
},
beforeUpdate(){
console.log("【运行中】beforeUpdate：界面还没有被更新,数据已经被更新了")
},
updated(){
console.log("【运行中】updated：界面和data数据都已经被更新")
},
beforeDestory(){
console.log("【结束】beforeDestory：实例从运行阶段进入到销毁阶段，实例上所有的data和methods以及过滤器指令等都处于可用状态，还没有真正执行销毁过程")
}
})
</script>
</body>
</html>
