#Vue3篇:生命周期
创始人
2024-06-02 09:46:32

Vue3的生命周期钩子函数与Vue2的有所不同。
以下是Vue3中常用的生命周期函数:

  1. beforeCreate
    在实例创建之前调用;
    在此阶段,组件实例的属性和方法还没有被初始化。
  2. created
    在实例创建完成之后调用;
    在此阶段,组件实例的属性和方法已经初始化,
    并且可以访问this对象。
  3. beforeMount
    组件挂载到DOM之前调用
  4. mounted
    在实例挂载到DOM后被调用;
    在这个阶段,实例已经被渲染到了页面上,
    并可以访问到渲染后的DOM元素。
  5. beforeUpdate
    组件更新之前调用,
    在此阶段,组件的状态已经发生变化;
    DOM还没有被更新
  6. updated
    组件更新之后调用。
    在这个阶段,组件状态已经发生变化,
    DOM已经被更新。
  7. beforeUnmount
    在实例销毁之前被调用。
    在这个阶段,实例仍然可以访问到数据和方法。
  8. unmounted
    在实例销毁后被调用。
    在这个阶段,实例的所有数据和方法都已经被清除,无法在访问到。
  9. errorCaptured
    组件或其子组件抛出未捕获的错误时调用

在Vue3中,以下生命周期钩子已经被移除
-beforeDestroy组件销毁前调用;
-destroyed组件销毁之后调用
Vue3中,组件销毁的过程是自动的,不需要手动调用销毁钩子

在Vue3中,还有一些新的属性和API,用于控制组件的声明周期

  1. setup
    组件创建时调用;
    它是组件的入口点,并返回一个对象,该对象包含组件的状态和方法
  2. onBeforeMount
    组件挂载到DOM之前调用
  3. onMounted
    组件挂载到DOM之后调用
  4. onBeforeUpdate
    组件更新之前调用
  5. onUpdated
    组件更新之后调用
  6. onBeforeUnmount
    组件卸载之前调用
  7. onUnmounted
    组件卸载之后调用
  8. onErrorCaptured
    组件或其子组件抛出位捕获的错误时调用

相关内容

热门资讯

新郎在婚礼上经典发言稿 婚礼发... 新郎在婚礼上经典发言稿 尊敬的各位来宾:今天我由衷地开心和激动,因为我终于结婚了。一时间纵有千言万语...
婚礼介绍人的发言稿 婚礼介绍人... 婚礼介绍人的发言稿各位来宾、各位领导、女士们、先生们,你们好!   今天我代表新郎新娘----...
婚庆主持发言稿 婚庆主持发言稿... 婚庆主持发言稿尊敬的的各位来宾,各位亲友大家下午好!   今天是公元**月*日,英俊潇洒风度翩翩...
在师德演讲会上的发言《阳光师魂... 在师德演讲会上的发言《阳光师魂 榜样师行》各位领导、老师、同学们 大家好!今天我有幸在这里与大家一起...
在班主任期中工作总结上的发言 ... 在班主任期中工作总结上的发言尊敬的各位领导、各位班主任老师: 大家好!非常感谢学生科给我这个机会,就...