Vue生命周期钩子函数详解,常用的生命周期钩子有哪些呢?

关于vue生命周期钩子函数的介绍:生命周期钩子就是vue实例从初始化到回收的整个过程。
生命周期 :简单理解就是,从出生到被销毁的过程。钩子就是回调函数,在某一个时间点触发,下图为官方图示。

图片[1]-Vue生命周期钩子函数详解,常用的生命周期钩子有哪些呢?-草叶博客-关注前端开发,分享优质资源

vue生命周期有8个钩子,最常用有3个:

  • created() : data最早是在这个钩子创建
  • mounted() : 完成初始渲染
  • beforeDestroy() : 销毁前

生命周期钩子注意点

声明生命周期勾子时不能使用箭头函数,必须使用function,在function函数的勾子中this指向vue实例,而箭头函数的勾子this指向window

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
喜欢就支持以下吧
点赞1赞赏
分享
评论 抢沙发