(这张图是整个vue的生命周期过程)
生命周期函数(钩子函数):在特定的阶段,能够自动执行的函数,总共分为 8 个阶段:创建前/后,载入前/后,更新前/后,销毁前/后
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
请求放在这个阶段也是可以的)
挂载时
render
函数首次被调用DOM
操作载入前/后
beforeUpdate
阶段: 在挂载开始之前被调用: 相关的 render
函数首次会被调用,监测到data
发生变化,在变化的数据重新渲染视图之前会触发,这也是重新渲染之前最后修改数据的机会 可以在当前阶段进行更改数据,不会造成重渲染updated
: 监测到data
发生变化,并完成渲染更新视图之后触发,虚拟 DOM
重新渲染和打补丁之后调用,组合新的DOM
已经更新,避免在这个钩子函数中操作数据,防止死循环销毁前/后
beforeDestory
阶段: 实例销毁前调用,实例还可以用,this
能获取到实例,常用于销毁定时器,解绑事件在当前阶段实例完全可以被使用,我们可以在时进行善后收尾工作,比如:清除计时器
destoryed
阶段: 实例销毁后调用,调用后所有事件监听器会被移除,所有的子实例都会被销毁,当前阶段组件被拆解,数据绑定被卸除,监听被移出,子实例也统统被销毁在代码里,把这些生命周期函数写上去,打开控制台,测试一下,就知道这些生命周期函数具体的执行顺序了的,还是要理解上面的一张生命周期图谱
如遇到什么问题,也欢迎小伙伴们下方留言,一起学习探讨~