Vue.js组件有9个生命周期钩子函数,它们按照调用顺序分为三种类型:

  1. 创建期

beforeCreate():在实例初始化之后,数据观测和事件配置之前被调用。

created():在实例创建完成后被立即调用。在这一步,实例已完成以下的配置:数据观测 (data observer),属性和方法的运算,事件回调。然而,挂载阶段还没开始,$el属性目前尚不可用。

beforeMount():在挂载开始之前被调用:相关的render函数首次被调用。

mounted():el被新创建的vm.$el替换,并挂载到实例上去之后调用该钩子。

  1. 更新期

beforeUpdate():数据更新时调用,发生在虚拟DOM重新渲染和打补丁之前。

updated():由于数据更改导致的虚拟DOM重新渲染和打补丁,在这之后会调用该钩子函数。

  1. 销毁期

beforeDestroy():实例销毁之前调用。在这一步,实例仍然完全可用。

destroyed():实例销毁之后调用。此时,所有的事件监听器被移除,所有的子实例也都被销毁。

activated():keep-alive组件激活时调用。

deactivated():keep-alive组件停用时调用。

总结:Vue组件的生命周期非常重要,可以在不同的生命周期中执行不同的操作,以达到最佳的效果。熟练掌握生命周期可以更好地理解Vue的工作原理。

vue中生命周期

原文地址: https://www.cveoy.top/t/topic/FCI 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录