从使用角度剖析Vue中的生命周期函数

前端

2023-09-17 09:28:16

生命周期函数：Vue 中管理组件生命周期的关键

创建阶段

组件的生命周期从创建开始。这是在虚拟 DOM 中创建组件实例并对其进行初始化的阶段。此阶段有 2 个生命周期函数：

onBeforeCreate： 在实例创建之前调用。在此函数中，您可以执行一些初始化任务，例如设置默认状态值。
onCreated： 在实例创建之后调用。在该函数中，您通常会获取数据或进行其他初始化操作，例如加载第三方库。

装载阶段

在此阶段，组件被挂载到 DOM 中，这意味着它已成为应用程序的一部分并可以在用户界面中看到。有两个生命周期函数与装载阶段相关：

onBeforeMount： 在组件挂载到 DOM 之前调用。您可以在此函数中执行一些最终的初始化任务，例如向 DOM 添加事件侦听器。
onMounted： 在组件挂载到 DOM 之后调用。在该函数中，您可以进行需要对真实 DOM 元素进行访问的操作，例如操纵 CSS 类。

更新阶段

当组件的状态或道具发生更改时，将触发更新阶段。此阶段有 2 个生命周期函数：

onBeforeUpdate： 在组件更新之前调用。您可以使用此函数来准备即将进行的更新，例如在必要时从服务器获取数据。
onUpdated： 在组件更新之后调用。在该函数中，您可以执行需要在更新 DOM 后进行的操作，例如滚动到特定元素。

销毁阶段

这是组件生命周期的最后阶段，当组件从 DOM 中卸载时触发。在此阶段也有 2 个生命周期函数：

onBeforeDestroy： 在组件销毁之前调用。您可以使用此函数来执行任何清理任务，例如删除事件侦听器或取消定时器。
onDestroyed： 在组件销毁之后调用。在该函数中，您可以释放任何组件使用的资源或执行其他清理操作。

代码示例

以下是一个使用 Vue 生命周期函数的简单示例：

export default {
  data() {
    return {
      count: 0
    };
  },
  created() {
    console.log('Component created with count:', this.count);
  },
  mounted() {
    console.log('Component mounted with count:', this.count);
  },
  updated() {
    console.log('Component updated with count:', this.count);
  },
  beforeDestroy() {
    console.log('Component about to be destroyed with count:', this.count);
  },
  destroyed() {
    console.log('Component destroyed with count:', this.count);
  }
};