关于vue生命周期钩子函数的介绍:生命周期钩子就是vue实例从初始化到回收的整个过程。
生命周期 :简单理解就是,从出生到被销毁的过程。钩子就是回调函数,在某一个时间点触发,下图为官方图示。
vue生命周期有8个钩子,最常用有3个:
created() : data最早是在这个钩子创建 mounted() : 完成初始渲染 beforeDestroy() : 销毁前
生命周期钩子注意点
beforeCreate()
vue实例正在创建中 (此时el和data均未创建),此时无法获取挂载点和data数据。
beforeCreate() {
console.log(1);
/* 注意点:这个勾子中 无法获取挂载点 和 data数据 (*/
console.log( this.$el );
console.log( this.msg );
},
created()
vue实例完成创建 (此时el未创建,data创建)
created() {
/* 注意点: 这个勾子创建了data,但是没有创建el */
console.log( this.$el );
console.log( this.msg );
},
beforeMount()
vue实例完成创建 (挂载前el创建)此时el和data都已创建,但还没有将data数据渲染到el
beforeMount() {
console.log(3);
/* 注意点:这个勾子创建了el与data
但是此时还没有将data数据渲染到el
*/
console.log( this.$el );
console.log( this.msg );
},
mounted()
完成初始挂载(此时将data数据渲染到el)
mounted() {
},
beforeUpdate()
data中任何数据改变都会执行这个钩子,此时只是监听数据变化,还未渲染
beforeUpdate() {
/* 注意点:监听数据变化,但是没有渲染 */
console.log(5);
},
updated()
这个钩子完成渲染修改后的数据
updated() {
/* 这个勾子完成了修改后数据的渲染 */
console.log(6);
}
beforeDestroy()
销毁前,还没有销毁,准备销毁,什么都可以访问,用于一些善后处理。例如清除定时。
beforeDestroy() {
console.log(7);
},
destroyed()
从destroyed的字面意思可知,中文意为是“销毁”的意思,当我们离开这个页面的时候,便会调用这个函数(具体可以看看vue的的生命周期),销毁后,中断html与js联系(取消渲染),它还是可以访问data与methods
© 版权声明
文章版权归作者所有,未经允许请勿转载。
THE END
喜欢就支持以下吧