Vue
的生命周期指的是组件从创建到销毁所经历的一系列的过程,在这个过程中,Vue
提供了一些生命周期的钩子函数,使得我们能够在其各个生命阶段有机会执行额外的任务。
Vue
一共有 4 个生命周期的阶段,分别是创建(Create
)、挂载(Mount
)、更新(Update
)和销毁(Destroy
)阶段,每个阶段都对应前(beforeXxx
)和后(xxxed
)两个生命周期的钩子函数。
Create 阶段
beforeCreate
钩子函数,在实例初始化之后,在数据监听和事件配置之前触发,注意,在这个钩子函数中我们是获取不到data
数据的created
钩子函数,在实例创建完成后触发,此时可以访问data
、methods
等属性,但此时组件还没有被挂载到页面中去,所以这个时候访问不到$el
属性。通常在这个函数中进行一些页面初始化的工作,例如通过ajax
异步请求后端数据来初始化页面。
Mount 阶段
beforeMount
钩子函数,在组件被挂载到页面之前触发,在beforeMount
之前,会找到对应的template
,并编译成render
函数mounted
钩子函数,在组件挂载到页面之后触发,此时可以通过DOM API
获取到页面中的DOM
元素
Update 阶段
beforeUpdate
钩子函数,在响应式数据更新时触发,发生在虚拟DOM
重新渲染和打补丁之前,这个时候我们可以对可能会被移除的元素做一些操作,比如移除事件监听器updated
钩子函数,在虚拟DOM
重新渲染和打补丁之后调用
Destroy 阶段
beforeDestroy
钩子函数,在实例销毁之前调用,一般在这一步我们可以销毁定时器、解绑全局事件等destroyed
钩子函数,在实例销毁之后调用,调用后,Vue
实例中的所有东西都会解除绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。
我们可以结合官网生命周期图示并加以注释来理解,图示如下:
keep-alive
除了上述生命周期钩子函数外,当我们使用 keep-alive
的时候,还有两个钩子函数,分别是 activated
和 deactivated
。
用 keep-alive
包裹的组件在切换时不会进行销毁,而是缓存到内存中并执行 deactivated
钩子函数,命中缓存渲染后会执行 actived
钩子函数。