Vue生命周期
作为vue的核心之一,生命周期不管是文档还是面试都是高频知识点今天我们从什么是生命周期,生命周期的内容,如何利用生命周期出发,做一些探究
生命周期的理解
- 官方:Vue 实例从创建到销毁的过程,就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程,我们称这是 Vue 的生命周期
通俗的说:当加载一个页面的时候,会创建一个vue实例来展示这个页面,
第一阶段
- 最先开始的 是创建,也就是 「beforeCreate」 ,这个阶段,实例初步被创建,还没有初始化,就是一个具备基本模板,没有任何数据和事件的光杆司令,
然后进入到「created」阶段,这时候实例创建完成,并且立刻调用这个钩子里的函数,这时候数据观测 (data observer),watch/event 事件回调 的属性和方法配置完成,页面元素还没初始化,
接下来准备开始挂载dom节点,以供操作,在挂载之前 「beforeMount」 阶段,这时候相关的render函数首次被调用,并且完成页面元素和数据的初始化,
然后「mounted」阶段,这时候属性有了,方法有了,页面元素有了,数据也有了,所以这个阶段会对DOM节点进行操作,进行挂载完毕,并且挂载完毕后调用钩子里的函数,所以大多数的函数放在这里面,因为这里了开始可以对dom进行操作
第二阶段
第一阶段数据渲染完毕,页面展现完毕,这时候想要进行数据交互,这时的第一阶段是 「beforeUpdate」 ,它发生在数据更新的调用时候,DOM还没有重新渲染之前,这时候可以进一步更改状态,而且不会触发重新渲染的过程
「updated」 阶段,这个阶段DOM以及重新渲染,可以行使操作新dom的的行为,但是应该避免出现这种行为,很可能会导致更新无线循环
「beforeDestroy」 阶段,上一阶段的行为最好放在这里使用这是实例销毁之前的最后完整保留
「destroyed this.$destroy()」 ,这个阶段实例被销毁,实例相关的一切消失,
小结: 生命周期钩子的一些使用方法: 「beforecreate」 : 可以在这加个「loading」事件,在加载实例时触发 「created」 : 「初始化」完成时的事件写在这里,如在这「结束loading」事件,异步请求也适宜在这里调用 「mounted」 : 挂载元素,获取到「DOM」节点 「updated」 : 如果对「数据统一处理」,在这里写上相应函数 「beforeDestroy」 : 可以做一个「确认停止事件的确认框」
经典生命周期图
img
这张图有不理解的可以查上面的白话,还有不理解的可以留言,看到了会尽力回答, 后期会更新源码配合理解
作者:coolFish
链接:https://juejin.im/post/6893884574854545422
看完两件小事
如果你觉得这篇文章对你挺有启发,我想请你帮我两个小忙:
- 把这篇文章分享给你的朋友 / 交流群,让更多的人看到,一起进步,一起成长!
- 关注公众号 「画漫画的程序员」,公众号后台回复「资源」 免费领取我精心整理的前端进阶资源教程
本文著作权归作者所有,如若转载,请注明出处
转载请注明:文章转载自「 Js中文网 · 前端进阶资源教程 」https://www.javascriptc.com