什么是生命周期
- 从Vue实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件被统称为生命周期。
- 生命周期钩子 = 生命周期函数 = 生命周期事件
生命周期分类
创建期间的生命周期函数
- beforeCreate:实例刚在内存中被创建出来，此时还没有初始化data和methods属性
- created:实例已经在内存中创建好，此时data和methods已经创建好了，但此时还没有开始编译模板
- beforeMount:此时已经完成了模板的编译，但还没有挂载到页面中
- mounted:此时已经将编译好的模板挂载到了页面指定的容器中显示
运行期间的生命周期函数
- beforeUpdate:状态更新之前执行此函数，此时data中的状态值是最新的，但是界面上显示的数据还是旧的，因为还没有开始重新渲染DOM节点
- updated:实例更新更新完毕之后调用此函数，此时data中的状态值和界面上显示的数据都已经完成了更新，界面也已经被重新渲染好了
销毁期间的生命周期函数
- beforeDestroy:实例销毁之前调用此函数，在这一步，实例仍然完全可用
- destroyed: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()
//说明在create周期函数执行时 data和methods中的数据都初始化完成了
//如果要调用methods中的方法或者操作data中的数据 最早只能在created中去操作
},
beforeMount(){ //第三个生命周期函数
// console.log(document.getElementById('h3').innerText)
//表示模板已经在内存中编译完成 但尚未把模板渲染到页面中去
//在beforeMount执行时 页面中的元素还没有被真正替换过来
},
mounted(){ //第四个生命周期函数
// console.log(document.getElementById('h3').innerText)
//在beforeMount执行时 把内存中编译好的模板渲染到页面中
//mounted是实例创建期间的最后一个生命周期函数 当执行完mounted后 就表示实例已经被完全创建好了
},
//运行中的两个事件
beforeUpdate(){
// console.log('界面上元素的内容：'+document.getElementById('h3').innerText)
// console.log('data中msg的数据：'+this.msg)
//当执行beforeUpdate时 data数据是最新的 但是页面尚未同步
},
updated(){
console.log('界面上元素的内容：'+document.getElementById('h3').innerText)
console.log('data中msg的数据：'+this.msg)
//根据data中的最新数据在内存中更新DOM树，并且重新渲染到页面中去
//updated执行时 页面和data数据已经保持同步了
},
beforeDestroy(){
//当执行beforeDestroy钩子函数时 Vue实例就进入到了销毁阶段
//但是实例上的data和methods等等都处于可用状态
},
destroyed(){
//当执行destroy时 Vue实例所有的数据都不可用了
}
})
