Vue
钩子函数是在Vue
实例从创建到销毁的过程中自动执行的函数(在特定的阶段,能够自动自执行的函数)
钩子函数用来描述一个组件从引入(创建)到退出(销毁)的全过程中的某个过程
Vue2生命周期钩子函数
整个过程称为生命周期Vue
钩子函数按照组件生命周期的过程分为挂载阶段,更新阶段和销毁阶段
beforeCreate()
:在new
一个Vue
实例后,只有一些默认的生命周期钩子和默认事件,其他的东西都还没创建,在此生命周期执行的时候,data
和methods
中的数据都没有初始化created()
:在示例创建完成之后,数据已经准备好,但是挂载DOM
节点还没有开始,此时无法访问DOM
节点beforeMount()
:在挂载开始之前被调用,render
函数首次被调用,在此时,模板编译成了render函数,但是还没有渲染成真实的DOM节点mounted()
:在挂载完成后被调用,此时DOM
节点已经全部渲染完毕,可以在这个钩子函数中操作DOM
节点,例如获取元素的大小和位置等beforeUpdate()
:在数据更新之前被调用,可以在此时对更新前的数据进行操作,但此时还无法访问到更新后的数据updated()
:在数据更新后被调用,DOM已经被重新渲染,可以在此时对DOM进行操作,但是需要注意避免无限循环的情况beforeDestory()
:在实例销毁之前被调用,可以在此时进行一些清理工作,例如:清除定时器或取消事件监听等destroyed()
:在实例销毁之后被调用,此时实例中的所有东西都已经被销毁,无法在访问到实例中的数据和方法