Vue.js 中包含多个生命周期钩子(hook)。这些生命周期钩子是在 Vue 实例从创建到销毁的过程中自动调用的函数。以下是 Vue.js 中常用的生命周期:
- beforeCreate - 在实例被创建之初调用
- created - 在实例创建完成后立即调用
- beforeMount - 在挂载开始之前被调用
- mounted - 在挂载完成后调用
- beforeUpdate - 数据更新时调用,但是在 DOM 更新之前
- updated - 在数据更新且 DOM 更新完成后调用
- activated - 在 keep-alive 组件激活时调用
- deactivated - 在 keep-alive 组件停用时调用
- beforeDestroy - 在实例销毁之前调用
- destroyed - 在实例销毁完成后调用
这些生命周期钩子为我们提供了在组件各个阶段的处理机会,可以使用这些生命周期钩子来做一些具体的操作,例如组件初始化、页面渲染、页面更新、销毁等。
import { onBeforeMount, onBeforeUnmount, onBeforeUpdate, onMounted, onUnmounted, onUpdated, } from "vue"; export default { setup() { onBeforeMount(() => { //执行函数 }); onMounted(() => { //执行函数 }); onBeforeUpdate(() => { //执行函数 }); onUpdated(() => { //执行函数 }); onBeforeUnmount(() => { //执行函数 }); onUnmounted(() => { //执行函数 }); return {}; }, };