Vue3 生命周期钩子-JavaScript中文网-JavaScript教程资源分享门户

在 Vue3 中，生命周期钩子是理解组件状态变化的关键。这些钩子允许你在组件的不同阶段执行自定义逻辑。每个生命周期钩子都有其特定的作用和使用场景。下面将详细介绍 Vue3 中的生命周期钩子。

创建与初始化阶段

beforeCreate 钩子在实例创建完成后立即调用，但此时数据观测(data observer)和事件配置还没有开始。这意味着你不能访问到 data 或者 methods 中的数据。

export default {
  beforeCreate() {
    console.log('beforeCreate: 实例刚刚创建完成');
  }
}

created 钩子在实例创建完成后被调用。此时数据观测(data observer)已经完成，属性和方法的运算已经完成，但是挂载阶段还没开始，$el 属性目前不可见。

export default {
  created() {
    console.log('created: 数据观测和事件配置已经完成');
  }
}

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

export default {
  beforeMount() {
    console.log('beforeMount: 挂载开始之前');
  }
}

mounted 钩子在挂载完成后被调用。这时，el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内的元素，当 mounted 被调用时 vm.$el 也在文档内。

export default {
  mounted() {
    console.log('mounted: 挂载完成后');
  }
}

beforeUpdate 钩子在数据更新时调用，发生在虚拟 DOM 打补丁之前。此时可以获取更新前的 DOM。

export default {
  beforeUpdate() {
    console.log('beforeUpdate: 数据更新前');
  }
}

updated 钩子在由于数据更改导致的虚拟 DOM 重新渲染和打补丁之后调用。注意，此钩子可能在初始渲染时不被调用（即 mounted 之后）。

export default {
  updated() {
    console.log('updated: 数据更新后');
  }
}

beforeUnmount 钩子在卸载组件实例之前调用。在这个阶段，实例仍然是完全正常的。

export default {
  beforeUnmount() {
    console.log('beforeUnmount: 卸载之前');
  }
}

unmounted 钩子在组件实例销毁后调用。调用此钩子时，组件实例的所有指令都被解绑，所有事件监听器被移除，所有子组件实例也被销毁。

export default {
  unmounted() {
    console.log('unmounted: 组件卸载后');
  }
}

errorCaptured 钩子提供一个捕获子组件错误的机会。它会被父组件用来捕获来自任何子组件的错误。

export default {
  errorCaptured(err, vm, info) {
    console.log('errorCaptured: 捕获错误', err, info);
  }
}

activated 钩子在 keep-alive 组件激活时调用。这通常用于需要在组件激活时执行某些操作的场景。

export default {
  activated() {
    console.log('activated: keep-alive 组件激活时');
  }
}

deactivated 钩子在 keep-alive 组件停用时调用。

export default {
  deactivated() {
    console.log('deactivated: keep-alive 组件停用时');
  }
}

serverPrefetch 钩子在服务器端渲染期间被调用，以便预先获取数据。

export default {
  async serverPrefetch() {
    await this.fetchData();
    console.log('serverPrefetch: 服务器预取数据');
  }
}

以上就是 Vue3 的生命周期钩子的详细说明。通过合理地利用这些钩子，你可以更好地控制组件的行为和状态，从而构建出更加健壮和高效的前端应用。