Vue3的生命周期钩子函数与Vue2的有所不同。
以下是Vue3中常用的生命周期函数:
beforeCreate
在实例创建之前调用;
在此阶段,组件实例的属性和方法还没有被初始化。created
在实例创建完成之后调用;
在此阶段,组件实例的属性和方法已经初始化,
并且可以访问this对象。beforeMount
组件挂载到DOM之前调用mounted
在实例挂载到DOM后被调用;
在这个阶段,实例已经被渲染到了页面上,
并可以访问到渲染后的DOM元素。beforeUpdate
组件更新之前调用,
在此阶段,组件的状态已经发生变化;
DOM还没有被更新updated
组件更新之后调用。
在这个阶段,组件状态已经发生变化,
DOM已经被更新。beforeUnmount
在实例销毁之前被调用。
在这个阶段,实例仍然可以访问到数据和方法。unmounted
在实例销毁后被调用。
在这个阶段,实例的所有数据和方法都已经被清除,无法在访问到。errorCaptured
组件或其子组件抛出未捕获的错误时调用
在Vue3中,以下生命周期钩子已经被移除
-beforeDestroy组件销毁前调用;
-destroyed组件销毁之后调用
Vue3中,组件销毁的过程是自动的,不需要手动调用销毁钩子
在Vue3中,还有一些新的属性和API,用于控制组件的声明周期
setup
组件创建时调用;
它是组件的入口点,并返回一个对象,该对象包含组件的状态和方法onBeforeMount
组件挂载到DOM之前调用onMounted
组件挂载到DOM之后调用onBeforeUpdate
组件更新之前调用onUpdated
组件更新之后调用onBeforeUnmount
组件卸载之前调用onUnmounted
组件卸载之后调用onErrorCaptured
组件或其子组件抛出位捕获的错误时调用