Vue有八个生命周期!
Vue的生命周期:
1.又叫:生命周期回调函数、生命周期函数、生命周期钩子。
2.是什么:Vue在关键时刻帮我们调用的一些特殊名称的函数。
3.生命周期函数的名字不可更改,但函数的具体内容是程序员根据需求编写的。
4.生命周期函数中的this指向是vm 或 组件实例对象。
二、第二个生命周期函数
在 created 中,data 和 methods 都已经被初始化好了!
如果要调用 methods 中的方法,或者操作 data 中的数据,最早,只能在 created 中操作
created() {
console.log(this.msg) //ok
this.show() //执行了show方法
},
三、第三个生命周期函数,表示模板已经在内存中编译完成,但是尚未把模板渲染到页面中
在beforeMount执行的时候,页面中的元素没有被真正替换过来,知识之前写的一些模板字符串
beforeMount() {
console.log(document.getElementById('h3').innerText) //{{msg}}
},
四、第四个生命周期函数,表示内存中的模板已经真实的挂载到页面中,用户已经可以看到渲染好的页面
这个mounted是实例创建期间的最后一个生命周期函数,当执行完 mounted 就表示,实例已经被完
全创建好了,此时,如果没有其它操作的话,这个实例,就静静地在内存中不动
mounted() {
console.log(document.getElementById('h3').innerText) //ok
},
**组件运行阶段的2个钩子函数**
五、第五个生命周期函数,表示 界面还没有被更新,但是数据肯定被更新了
得出结论:当执行 beforeUpdate 的时候,页面中的显示的数据,还是旧的,此时data 数据是最
新的,页面尚未和 最新的数据保持同步
beforeUpdate() {
console.log('界面上元素的内容'+ document.getElementById('h3').innerText) //没有执行,因为数据没改变
console.log('data 中的msg数据是:' + this.msg)
},
六、第六个生命周期函数
updated事件执行的时候,页面和 data 数据已经保持同步了,都是最新的
updated() {
console.log('界面上元素的内容'+ document.getElementById('h3').innerText) //No
console.log('data 中的msg数据是:' + this.msg) //No
},
**组件销毁阶段的2个钩子函数
七、第七个生命周期函数
beforeDestroy 实例销毁前 调用vm.$destroy()时触发,实例被销毁的前夕。
beforeDestroy() {
console.log('beforeDestroy')
}
八、第八个生命周期函数
destroyed 实例销毁完毕 该钩子被调用后,对应 Vue 实例的所有指令都被解绑,所有的事件监听器被移除,所有的子实例也都被销毁。(以后页面就无法动态更新数据了。也就是说无法数据驱动视图。)
destroyed() {
console.log('destroyed')
}
常用的生命周期钩子:
1.mounted: 发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】。
2.beforeDestroy: 清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】。
关于销毁Vue实例
1.销毁后借助Vue开发者工具看不到任何信息。
2.销毁后自定义事件会失效,但原生DOM事件依然有效。
3.一般不会在beforeDestroy操作数据,因为即便操作数据,也不会再触发更新流程了。