什么是生命周期?Vue中实例从创建到销毁的过程就是生命周期
Vue2的生命周期包括以下钩子函数:
-
beforeCreate:在
实例初始化之后,数据观测和事件配置之前被调用。在这个阶段,实例还没有被完全创建,因此无法访问到data、computed等属性。适用场景:可以在此阶段进行一些全局配置、插件的初始化等操作。 -
created:在
实例创建完成后被立即调用。在这一步,实例已完成以下的配置:数据观测,属性和方法的运算,watch/event事件回调。但是,挂载阶段还没有开始,$el属性目前尚不可用。适用场景:可以在此阶段进行一些异步请求数据、初始化数据等操作。 -
beforeMount:在
挂载开始之前被调用。在这个阶段,Vue将编译模板,并将其转换为虚拟DOM。适用场景:可以在此阶段进行一些准备工作,如修改数据、操作DOM等。 -
mounted:el被新创建的vm.$el替换,并挂载到实例上去之后调用该钩子。在这个阶段,
实例已经挂载到DOM上,可以访问到DOM元素。适用场景:可以在此阶段进行一些操作,如操作DOM、添加事件监听器等。 -
beforeUpdate:
数据更新时调用,发生在虚拟DOM重新渲染和打补丁之前。适用场景:可以在此阶段进行一些数据处理、更新DOM等操作。 -
updated:由于
数据更改导致的虚拟DOM重新渲染和打补丁完成之后调用。适用场景:可以在此阶段进行一些DOM操作、与其他库进行交互等。 -
beforeDestroy:
实例销毁之前调用。在这个阶段,实例仍然完全可用,可以进行一些清理工作,如清除定时器、解绑事件等。适用场景:可以在此阶段进行一些清理操作。 -
destroyed:
实例销毁之后调用。在这个阶段,Vue实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。适用场景:可以在此阶段进行一些资源释放、取消网络请求等操作。
根据不同的需求,可以在不同的生命周期钩子函数中执行相应的操作,如初始化数据、发送网络请求、操作DOM、清理资源等。