VUE生命周期中的一些钩子函数

生命周期广义上指的是一个事物从出生到死亡的过程,在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

在实例销毁之后调用，调用后，所有的事件监听器会被移出，所有的子实例也会被销毁，该钩子函数在服务器端渲染期间不被调用.