什么是生命周期?
在我们使用new Vue()创建Vue实例时,从创建到运行再到销毁,期间所发生的各种各样的事件,整个过程就被成为生命周期。顾名思义,就好比人从出生到死亡,这就是人的生命周期。
什么是生命周期钩子?
也叫生命周期函数、生命周期事件,就是vue实例从创建到销毁整个过程中发生的所有事件(它到底做了什么事情)
生命周期钩子分类
- beforCreate:刚刚初始化了一个Vue空实例对象,在这个对象上,只有一些默认的事件,无法访问到
data
和methods
中的方法和数据。 - created:完成属性和方法的运算,挂载阶段还未开始,$el 属性不存在。可以访问到
data
和methods
中的方法和数据,并可以进行异步操作。 - beforeMount:将Vue代码执行,并且在内存中完成了编译模板、解析指令/渲染函数、将数据和模板生成虚拟 DOM,只不过还没有挂载到DOM上,也就是说id="app"没效果。
- mounted:存中的模板已经真实挂载到了页面中,可以进行 DOM 操作,访问到
vm.$el
,这是实例创建的最后一个阶段。 - beforeUpdate:数据更新触发该函数,data中的数据已经更新完成,但是 DOM 尚未重新渲染(页面中的数据还是未更新的)。
- updated:数据已经更新,DOM 也已重新渲染。
- beforeDestroy:实例销毁之前调用。可以做一些清理工作,如解绑自定义事件、销毁定时器、取消订阅等,但是所有的data和methods等都处于可用状态。
- destroyed:组件已经被完全销毁。