虽互不曾谋面,但希望能和您成为笔尖下的朋友
以读书,技术,生活为主,偶尔撒点鸡汤
不作,不敷衍,意在真诚吐露,用心分享
点击左上方,可关注本刊
标星公众号(ID:itclanCoder)
如果不知道如何操作
点击这里,标星不迷路
(这张图是整个vue的生命周期过程)
生命周期函数(钩子函数):在特定的阶段,能够自动执行的函数,总共分为 8 个阶段:创建前/后,载入前/后,更新前/后,销毁前/后
beforeCreate阶段:
vue
实例挂载元素el
和数据对象data
都为undefined
,还未初始化
注意
在当前阶段data
,methods
,computed
以及watch
上的数据和方法都不能被访问
应用场景
可以在此时加一些
loading
效果,在created
时进行移除也可以在此阶段做一些页面拦截,当进入一个路由时,可以判断是否有权限进去,是否安全,携带参数是否完整,参数是否安全,使用好这个钩子的时候就避免了让页面去判断,省掉了创建一个组件
vue
实例做自定义重定向,当路由还没有进去时,判断是否正确进去,若不正确则可以重定向到指定的页面
想要在实例化数据之前做什么事情,都可以在这个钩子函数里设置
created阶段
:vue
实例的数据对象data
有了,el
还没有,在实例创建完成后会被立即调用。在这一阶段,实例已完成,数据观测(data observer
),property
和方法的运算,watch/event
事件回调
然而,挂载阶段还没开始,``$el property`目前尚不可用
在这一阶段可以做一些初始化数据的获取,在当前阶段无法与DOM
进行交互,如果非要做,可以通过vm.$nextTick
来访问DOM
应用场景: 需要异步请求数据的方法可以在此时执行,完成数据的初始化(Ajax
请求放在这个阶段也是可以的)
挂载时
beforeMount: 在挂载开始之前被调用,相关的
render
函数首次被调用mounted: 实例已经挂载完成,可以进行一些
DOM
操作
载入前/后
beforeUpdate
阶段: 在挂载开始之前被调用: 相关的render
函数首次会被调用,监测到data
发生变化,在变化的数据重新渲染视图之前会触发,这也是重新渲染之前最后修改数据的机会 可以在当前阶段进行更改数据,不会造成重渲染updated
: 监测到data
发生变化,并完成渲染更新视图之后触发,虚拟DOM
重新渲染和打补丁之后调用,组合新的DOM
已经更新,避免在这个钩子函数中操作数据,防止死循环
销毁前/后
beforeDestory
阶段: 实例销毁前调用,实例还可以用,this
能获取到实例,常用于销毁定时器,解绑事件
在当前阶段实例完全可以被使用,我们可以在时进行善后收尾工作,比如:清除计时器
destoryed
阶段: 实例销毁后调用,调用后所有事件监听器会被移除,所有的子实例都会被销毁,当前阶段组件被拆解,数据绑定被卸除,监听被移出,子实例也统统被销毁
在代码里,把这些生命周期函数写上去,打开控制台,测试一下,就知道这些生命周期函数具体的执行顺序了的,还是要理解上面的一张生命周期图谱
如遇到什么问题,也欢迎小伙伴们下方留言,一起学习探讨~
记账就用轻记账
公众号(ID:itclanCoder)
码能让您早脱菜籍,文能让您洗净铅华
可能您还想看更多:
Js篇-面试题12-如何解析 URL 提取 params 参数