|
生命周期广义上指的是一个事物从出生到死亡的过程,在vue中就是一个组件从创建到销毁的过程.
在vue的生命周期中有一些内置的生命周期函数,它们被称为钩子函数,会随着生命周期自动调用,它们会在特定时间,执行特定的操作.
以下是一些常用的钩子函数
初始化阶段---beforeCreate、created
? ?1. beforeCreate
beforeCreate会在初始化事件和生命周期函数之后执行,此阶段拿不到自定义的data元素和methods方法等等..,因为此时组件的选项对象还未创建.
? ?2. created(常用)
当beforeCreate执行后, Vue实例内部会完成数据观测、属性和方法的运算、watch/event事件回调、data 数据的初始化,然而此时并没有开始分析编译模板,$el属性目前不可见,此阶段是常用的处理数据的阶段,因为各种数据都已经初始化完成,可以对各项数据进行预处理或者在这里发送ajax请求拿到服务器端数据.
挂载阶段---beforeMount、mounted
? ?1.?beforeMount
beforeMount在完成template选项检查之后,虚拟DOM挂载成真实DOM之前 被调用,此时vue实例已经完成了编译模板，把data里面的数据和模板生成html,但是还未被挂载到页面上,这个阶段是获取不到DOM元素的!!操作不了DOM的.
? ?2.?mounted
此时挂载已完成,内存中的虚拟html被渲染到真实html页面上,此时就可以获取到页面上的真实DOM元素进行操作了,mounted只会被执行一次!
更新阶段---beforeUpdate、updated
? ?1.?beforeUpdate
在data里数据改变, 更新DOM之前,beforeUpdate被执行,可以在该钩子中进一步地更改状态，不会触发附加地重渲染过程,此时获取的是更新前的DOM和data数据.
? ?2.?updated(常用)
在数据更改导致地虚拟DOM重新渲染和打补丁时会调用，调用时，组件DOM已经更新，此时可以获取到更新后的DOM和data数据,可以对更新后的数据和DOM进行操作.
销毁阶段---beforeDestroy、destroyed
? ?1.?beforeDestroy
当$destroy()被调用,比如v-if移除DOM组件之前被调用,此时要执行销毁的DOM还在页面上,是可以操作的,一般在这里移除当前组件, 计时器, 定时器, eventBus移除事件$off方法.
? ?2.?destroyed
在实例销毁之后调用，调用后，所有的事件监听器会被移出，所有的子实例也会被销毁，该钩子函数在服务器端渲染期间不被调用.
|