vue学习(十九) 生命周期 了解
生命周期：从vue实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件统称为生命周期
生命周期钩子：就是生命周期事件的别名而已
生命周期钩子==生命周期函数==生命周期事件
生命周期函数分类：
- 创建型的生命周期函数：
beforeCreate：实例刚在内存中被创建的出来，此时还没有初始化好data和methods属性
created：实例已经在内存中创建好并且data和methods已经创建好，但是模板template还未编译
beforeMount：此时已经完成了模板的编译，但是还没有挂载到页面中
mounted：此时，已经将编译好的模板，挂载到了页面指定的容器中显示
- 运行期间的生命周期函数：
beforeUpdate：状态更新之前执行此函数，此时data中的状态值是最新的，但是界面上现实的数据还是旧的，因为此时还没有开始重新渲染DOM节点
updated：实例更新完毕之后调用此函数，此时data中的状态值和界面上显示的数据都已经完成了更新，界面已经被重新渲染好了
- 销毁期间的生命周期函数：
beforeDestroy：实例销毁之前调用，在这一步，实例依然完全可用
destroyed：vue实例销毁后调用，调用后，vue实例指示的所有东西都会解除绑定，所有的事件监听器会被移除，所有的子实例也会被销毁
生命周期过程中的函数在测试验证的时候，最好一个一个从上到下来进行，不要全部执行，为了看的清楚
<div id="app">
<h3 id="h3">{{msg}}</h3>
<input type="button" value="修改msg" @click="msg='No'" />
</div>
<script>
var vm= new Vue({
el: "#app"，
data: {
msg: "ok"
},
methods: {
show(){
console.log("执行show方法")
}
},
beforeCreate(){//这是遇到的第一个生命周期函数，表示实例完全被创建出来之前，会执行它
//console.log(this.msg) //控制台输出 undefined 说明data 未被初始化
//this.show();//控制台异常 Error in beforeCreated hook:"TypeError:this.show is not a function" 说明methods未被初始化
//注意：在beforeCreated生命周期函数执行的时候，data和methods中的数据都没有被初始化
},
created: {//这是遇到的第二个生命周期函数
//console.log(this.msg) //控制台输出 ok 说明data 已经被初始化
//this.show();//控制台 打印 执行show方法 说明 methods已经被初始化
//结论 在created生命周期函数中，data和methods都已经被初始化好了
//如果要调用methods中的方法，或者操作data中的数据，最早只能在created中操作
},
beforeMount(){//这是遇到的第三个生命周期函数，表示模板已经在内存中被编译完成了，但尚未把模板渲染到页面
//console.log(document.getElementById('h3').innerText) //控制台打印 {{msg}} 而不是 ok 说明模板未被渲染到页面
//在beforeMount执行的时候，页面中的元素，还没有被真正替换过来，只是之前写的一些模板字符串
},
mounted(){//这四遇到的第四个生命周期函数，表示内存中的模板已经真实挂载到了页面中，用户已经可以看到渲染好的页面了
//console.log(document.getElementById('h3').innerText) //控制台打印 ok 说明模板被挂载到真实页面
//注意：mounted是实例创建期间最后一个生命周期函数，当执行完mounted就表示，实例已经被完全创建好了
},
//接下来是运行中的两个事件
beforeUpdate(){//这时候，表示我们的界面还没有被更新，但是数据已经被更新了
//console.log('界面上的元素内容:'+ document.getElementById('h3').innerText) //控制台打印 界面上的元素内容:ok
//console.log('data中的msg数据是:'+ this.msg) //控制台打印 data中的msg数据是:No
//得出结论：当执行beforeUpdate的时候，页面中显示的数据还是旧的，此时data中的数据是最新的，页面尚未和最新的数据保持同步
},
updated(){
//console.log('界面上的元素内容:'+ document.getElementById('h3').innerText) //控制台打印 界面上的元素内容:No
//console.log('data中的msg数据是:'+ this.msg) //控制台打印 data中的msg数据是:No
//updated事件执行的时候，页面和data数据已经保持同步了，都是最新的
},
})
</script>
