vue2的生命周期有哪些?都做了哪些事情,应用场景?

73 阅读2分钟

什么是生命周期?Vue实例从创建到销毁的过程就是生命周期

Vue2的生命周期包括以下钩子函数:

  1. beforeCreate:在实例初始化之后,数据观测和事件配置之前被调用。在这个阶段,实例还没有被完全创建,因此无法访问到data、computed等属性。适用场景:可以在此阶段进行一些全局配置、插件的初始化等操作。

  2. created:在实例创建完成后被立即调用。在这一步,实例已完成以下的配置:数据观测,属性和方法的运算,watch/event事件回调。但是,挂载阶段还没有开始,$el属性目前尚不可用。适用场景:可以在此阶段进行一些异步请求数据、初始化数据等操作

  3. beforeMount:在挂载开始之前被调用。在这个阶段,Vue将编译模板,并将其转换为虚拟DOM。适用场景:可以在此阶段进行一些准备工作,如修改数据、操作DOM等。

  4. mounted:el被新创建的vm.$el替换,并挂载到实例上去之后调用该钩子。在这个阶段,实例已经挂载到DOM上,可以访问到DOM元素。适用场景:可以在此阶段进行一些操作,如操作DOM、添加事件监听器等。

  5. beforeUpdate:数据更新时调用,发生在虚拟DOM重新渲染和打补丁之前。适用场景:可以在此阶段进行一些数据处理、更新DOM等操作。

  6. updated:由于数据更改导致的虚拟DOM重新渲染和打补丁完成之后调用。适用场景:可以在此阶段进行一些DOM操作、与其他库进行交互等。

  7. beforeDestroy:实例销毁之前调用。在这个阶段,实例仍然完全可用,可以进行一些清理工作,如清除定时器、解绑事件等。适用场景:可以在此阶段进行一些清理操作。

  8. destroyed:实例销毁之后调用。在这个阶段,Vue实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。适用场景:可以在此阶段进行一些资源释放、取消网络请求等操作。

根据不同的需求,可以在不同的生命周期钩子函数中执行相应的操作,如初始化数据、发送网络请求、操作DOM、清理资源等。