<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="button" value="修改msg" @click="msg='No'">
<h3 id="h3">{{msg}}</h3>
</div>
<script>
//创建Vue实例
var vm=new Vue({
el:"#app",
data:{
msg:'ok'
},
methods:{
show(){
console.log("执行了show方法");
}
},
beforeCreate(){//第一个生命周期函数，表示实例完全被创建出来之前会执行它
console.log(this.msg);
//this.show();
//注意：在beforeCreate生命周期执行的时候，data和methods中的数据都还没有被初始化
},
created(){//第二个生命周期函数
console.log(this.msg);
this.show();
//在created中，data和methods都已经被初始化好了
//如果要调用methods中的方法，或者操作data中的数据，最早也只能在created中操作
},
beforeMount(){//第三个生命周期函数，表示模板已经在内存中编辑完成了，但是尚未把模板渲染到页面中
console.log(document.getElementById("h3").innerText);//{{msg}}
//在beforeMount执行的时候，页面中的元素，还没有被真正的替换过来，只是之前写的一些模板字符串
},
mounted(){//第四个生命周期
//如果需要通过某些插件操作页面的DOM节点了，最早要在mounted中进行
//只要执行了mounted，就表示整个VUE实例已经创建完毕了。此时，组件已经脱离了创建阶段，进入到了运行阶段
},
//接下来是运行中的两个事件
beforeUpdate(){//这时候，表示我们的界面还没有被更新，但是数据已经被更新了
console.log('页面中的元素',document.getElementById("h3").innerText);//ok
console.log('data中的数据',this.msg);//No
//结论：当执行beforeUpdate的时候，页面中显示的数据，还是旧的，此时data数据是最新的，页面尚未和最新的数据保持同步
},
updated(){
console.log('页面中的元素',document.getElementById("h3").innerText);//No
console.log('data中的数据',this.msg);//No
//updated事件执行的时候，页面和data数据都已经保持同步了，都是最新的
}
//当执行beforeDestory钩子函数的时候，Vue实例就已经从运行阶段，进入到了销毁阶段
//当执行beforeDestory的时候，实例身上所有的data和所有的methods，以及过滤器、指令......都处于可用的状态，此时，还没有真正执行销毁的过程
//当执行到destoryed函数的时候，组件已经被完全销毁了，此时，组件中所有的数据、方法、指令、过滤器等等都已经不可用了
})
</script>
</body>
</html>
