彻底了解vue的生命周期函数，代码+注释全解
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script type="text/javascript" src="https://unpkg.com/vue"></script>
<title>Document</title>
</head>
<body>
<div id="app">
<!-- 测试第五个周期的按钮 -->
<input type="button" value="修改msg" @click="ok='no'">
<h3 id="h3">{{ok}}</h3>
</div>
<script>
//创建vue实例 得到 view model
var vm = new Vue({
el: '#app',
data: {
ok: 'ok'
},
methods: {
show() {
console.log('show执行了');
}
},
//第一个生命周期函数，表示实例被完全创建之前运行出来
//再data和methods都还没有被初始化
//
beforeCreate() {
console.log(this.show());
},
//第二个生命周期函数 data and methods 已经初始化好了
created() { //重要
console.log(this.show);
},
//第三个生命周期函数，模板已经再内存中编译完成，但是尚未把模板渲染到页面中去
beforeMount() {
console.log(document.getElementById("h3").innerText);
},
//第四个周期函数内存中的模板 已经真实挂在到了页面中，可以看到渲染好的页面了，当执行完这个，实例已经完全创建好了
mounted() { //重要
console.log(document.getElementById("h3").innerText);
},
//以上mouted（）实例完毕，马上进入到运行阶段
//第五个周期函数 这俩事件会根据data数据的/*改变*/，有选择性的出发0-n次
beforeUpdate() {//这时候表示我们的界面还没有被更新，但是数据已经被更新了
console.log(document.getElementById("h3").innerText);
},
//第六个周期函数 执行的手页面和data的数据已经保持同步了 都是最新的
updated() {
console.log(document.getElementById("h3").innerText);
},
//第七个周期函数 当执行这里的时候
//就已经从运行阶段进入到了销毁阶段了
//实例身上所有的data和所有的methods以及过滤器 指令等等，都处于可用状态，还没有真正执行销毁的过程
beforeDestroy() {
},
//第八个周期函数
//执行到这里的时候组件已经被完全销毁，组件中所有的数据方法指令过滤器 都已经不可用了
destroyed() {
}
})
</script>
</body>
</html>
