Vue3 初始化生命周期全解析，一文带你吃透！引言作为一名使用过 Vue 进行项目开发的前端开发者，我在工作中常常与

引言

作为一名使用过 Vue 进行项目开发的前端开发者，我在工作中常常与 Vue 的生命周期打交道。在一次开发项目时，我遇到了一个棘手的问题：组件在初始化时，数据请求和 DOM 渲染的顺序总是出现偏差，导致页面加载时出现短暂的空白或者数据显示错误。这让我意识到，深入理解 Vue3 的初始化生命周期是解决这类问题的关键。相信很多 Vue 开发者也有过类似的困扰，今天就来和大家详细聊聊 Vue3 初始化生命周期那些事儿。

Vue2 与 Vue3 生命周期简要对比

在 Vue2 的世界里，生命周期钩子是我们管理组件的得力助手，像beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed 这些钩子，在组件的不同阶段发挥着作用。比如在created钩子中，我们可以进行数据的初始化和简单的逻辑处理，因为此时组件实例已经创建，数据观测和事件配置也已完成。而mounted钩子则是在组件挂载到 DOM 后触发，非常适合进行一些需要 DOM 元素的操作，像初始化第三方插件、获取 DOM 元素的尺寸等。

到了 Vue3，生命周期钩子有了一些显著的变化。首先是命名上的调整，beforeDestroy和destroyed变成了beforeUnmount和unmounted，这一改变让钩子的含义更加直观，强调了组件的卸载过程。同时，Vue3 引入了组合式 API，其中setup函数成为了一个核心。在setup函数中，我们使用生命周期钩子的方式与 Vue2 有很大不同。在 Vue2 里，我们直接在选项对象中声明钩子函数，而在 Vue3 的setup函数中，需要通过导入特定的函数来注册生命周期钩子，比如onBeforeMount、onMounted、onBeforeUpdate、onUpdated、onBeforeUnmount、onUnmounted等。这种方式使得代码的组织更加灵活，逻辑更加清晰。

Vue3 组合式 API 中的关键生命周期钩子

setup 函数

在 Vue3 的组合式 API 中，setup函数可谓是占据着核心地位，它就像是一个舞台，所有的组合式 API 都在这里 “表演”。setup函数的执行时机十分特殊，它在beforeCreate和created之间运行。在这个阶段，组件实例已经创建，但还没有进行数据观测和事件配置。这使得setup函数承担起了初始化逻辑的重任，比如定义响应式数据、计算属性和方法等。

举个例子，假设我们有一个简单的计数器组件，在setup函数中可以这样实现：

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>
<script>
import { ref } from 'vue';
export default {
  setup() {
    // 定义响应式数据
    const count = ref(0);
    // 定义方法
    const increment = () => {
      count.value++;
    };
    // 返回数据和方法，以便在模板中使用
    return {
      count,
      increment
    };
  }
};
</script>

在这个例子中，setup函数定义了一个响应式数据count和一个方法increment 。由于setup函数在组件创建的早期阶段执行，此时还不能访问data、computed、methods等选项。这是因为这些选项是在setup函数执行之后才进行初始化的。而且setup函数中的this指向undefined，这也是与 Vue2 的一个重要区别。在使用setup函数时，我们需要注意它的返回值，如果返回一个对象，对象中的属性和方法可以在模板中直接使用；如果返回一个渲染函数，则可以自定义渲染内容。

onBeforeMount

onBeforeMount钩子在挂载开始之前被调用，此时组件的render函数首次被调用。这个钩子的主要作用是在组件挂载到 DOM 之前，进行一些准备工作。比如，我们可以在这个钩子中设置 DOM 元素的初始状态，或者进行一些数据的预处理。

假设我们有一个组件，需要在挂载前给某个 DOM 元素添加一个自定义属性，就可以在onBeforeMount钩子中实现：

<template>
  <div ref="myDiv">This is a div</div>
</template>
<script>
import { onBeforeMount, ref } from 'vue';
export default {
  setup() {
    const myDiv = ref(null);
    onBeforeMount(() => {
      if (myDiv.value) {
        myDiv.value.setAttribute('data-custom', 'true');
      }
    });
    return {
      myDiv
    };
  }
};
</script>

在这个例子中，我们通过ref获取到div元素的引用，然后在onBeforeMount钩子中给它添加了一个data-custom属性。这样，在组件挂载到 DOM 之前，这个属性就已经被设置好了。需要注意的是，在onBeforeMount钩子中，虽然可以访问到组件的ref，但此时 DOM 元素还没有真正挂载到页面上，所以不能进行一些依赖于 DOM 的复杂操作。

onMounted

当组件成功挂载到 DOM 后，onMounted钩子就会被调用。这是一个非常重要的钩子，因为此时我们可以安全地操作 DOM 元素，进行一些需要 DOM 的初始化工作。比如初始化第三方插件、获取 DOM 元素的尺寸和位置等。

在开发一个图表组件时，我们可能需要在组件挂载后使用Echarts来绘制图表，这时就可以在onMounted钩子中进行相关操作：

<template>
  <div ref="chartRef" style="width: 400px; height: 300px;"></div>
</template>
<script>
import { onMounted, ref } from 'vue';
import * as echarts from 'echarts';
export default {
  setup() {
    const chartRef = ref(null);
    onMounted(() => {
      const chart = echarts.init(chartRef.value);
      const option = {
        // 图表配置项
        title: {
          text: 'My Chart'
        },
        xAxis: {
          data: ['A', 'B', 'C', 'D', 'E']
        },
        yAxis: {},
        series: [
          {
            name: 'Data',
            type: 'bar',
            data: [120, 200, 150, 80, 70]
          }
        ]
      };
      chart.setOption(option);
    });
    return {
      chartRef
    };
  }
};
</script>

在这个例子中，我们在onMounted钩子中初始化了Echarts图表，并设置了相关的配置项。由于onMounted钩子是在组件挂载到 DOM 之后触发的，所以可以确保chartRef.value是一个真实的 DOM 元素，从而顺利地初始化图表。此外，onMounted钩子还可以用于进行数据请求，因为此时组件已经在页面上显示，获取数据后可以及时更新页面状态。

选项式 API 与组合式 API 生命周期钩子执行顺序

在 Vue3 中，选项式 API 和组合式 API 可以同时使用，这就涉及到两者生命周期钩子的执行顺序问题。理解这个顺序对于正确编写和调试代码至关重要。

初始化阶段

beforeCreate（选项式） ：在组件实例创建之初，数据观测和事件配置之前触发。这是组件生命周期的第一个阶段，此时组件实例刚刚被创建，还没有进行任何数据和方法的初始化。在这个阶段，我们可以进行一些非常基础的初始化操作，比如设置一些初始的全局变量。

setup（组合式） ：在beforeCreate之后，created之前执行。setup函数是组合式 API 的核心，它负责初始化组件的响应式数据、计算属性和方法等。在setup函数中，我们可以定义各种逻辑，并且可以访问到组件的props和context 。由于setup函数在组件创建的早期执行，所以它可以替代beforeCreate和created的部分逻辑。

created（选项式） ：在组件实例创建完成后，数据观测和事件配置完成后触发。此时，组件的data、computed、methods等选项都已经被初始化，可以访问和操作这些属性。在这个阶段，我们通常会进行一些数据请求和初始化的操作。

onBeforeMount（组合式） ：在挂载开始之前被调用，此时组件的render函数首次被调用。在这个阶段，我们可以进行一些挂载前的准备工作，比如设置 DOM 元素的初始状态。

beforeMount（选项式） ：与onBeforeMount类似，在挂载开始之前被调用。这个钩子的作用和onBeforeMount基本相同，只是它是选项式 API 中的钩子。

onMounted（组合式） ：在组件挂载到 DOM 后被调用。此时，我们可以安全地操作 DOM 元素，进行一些需要 DOM 的初始化工作。

mounted（选项式） ：在组件挂载到 DOM 后被调用。与onMounted不同的是，它是选项式 API 中的钩子，执行顺序在onMounted之后。

下面是一个代码示例，展示了初始化阶段生命周期钩子的执行顺序：

<template>
  <div>
    <p>Component Lifecycle</p>
  </div>
</template>
<script>
import { onBeforeMount, onMounted } from 'vue';
export default {
  beforeCreate() {
    console.log('beforeCreate (Options API)');
  },
  created() {
    console.log('created (Options API)');
  },
  beforeMount() {
    console.log('beforeMount (Options API)');
  },
  mounted() {
    console.log('mounted (Options API)');
  },
  setup() {
    console.log('setup (Composition API)');
    onBeforeMount(() => {
      console.log('onBeforeMount (Composition API)');
    });
    onMounted(() => {
      console.log('onMounted (Composition API)');
    });
  }
};
</script>

在这个示例中，当组件初始化时，控制台会按照beforeCreate (Options API)、setup (Composition API)、created (Options API)、onBeforeMount (Composition API)、beforeMount (Options API)、onMounted (Composition API)、mounted (Options API)的顺序输出日志。

更新阶段

onBeforeUpdate（组合式） ：在数据更新导致组件重新渲染之前被调用。在这个阶段，数据已经发生了变化，但 DOM 还没有更新。我们可以在这个钩子中进行一些数据的预处理或者记录数据变化的操作。

beforeUpdate（选项式） ：在数据更新导致组件重新渲染之前被调用。与onBeforeUpdate类似，它是选项式 API 中的钩子，执行顺序在onBeforeUpdate之后。

onUpdated（组合式） ：在组件重新渲染完成后被调用。此时，DOM 已经更新，我们可以在这个钩子中进行一些依赖于更新后 DOM 的操作。

updated（选项式） ：在组件重新渲染完成后被调用。它是选项式 API 中的钩子，执行顺序在onUpdated之后。

卸载阶段

onBeforeUnmount（组合式） ：在组件卸载之前被调用。在这个阶段，我们可以进行一些清理操作，比如取消定时器、解绑事件监听器等。

beforeUnmount（选项式） ：在组件卸载之前被调用。它是选项式 API 中的钩子，执行顺序在onBeforeUnmount之后。

onUnmounted（组合式） ：在组件卸载完成后被调用。此时，组件已经从 DOM 中移除，我们可以进行一些资源释放的操作。

unmounted（选项式） ：在组件卸载完成后被调用。它是选项式 API 中的钩子，执行顺序在onUnmounted之后。

新增钩子及特殊场景下的生命周期

用于缓存组件的 activated 和 deactivated

在 Vue3 中，activated和deactivated这两个生命周期钩子是专门为keep-alive缓存的组件设计的。keep-alive是 Vue 的一个内置组件，它的作用是缓存不活动的组件实例，避免组件的重复渲染，从而提高应用的性能。

当一个被keep-alive包裹的组件被激活时，activated钩子会被调用。这个钩子的执行时机是在组件挂载之后，并且在beforeRouteEnter守卫传给next的回调函数之前。这意味着，在activated钩子中，我们可以进行一些组件激活时的初始化操作，比如发送数据请求、重新初始化一些状态等。

当组件被停用时，deactivated钩子会被调用。这个钩子可以用于进行一些清理操作，比如取消定时器、解绑事件监听器等。由于被keep-alive缓存的组件不会被销毁，所以beforeDestroy和destroyed钩子不会被调用，而deactivated钩子就承担了类似的清理任务。

在一个多页面应用中，我们可能会有一个用户信息展示页面，这个页面在用户多次访问时，数据不会有太大变化。为了提高性能，我们可以使用keep-alive来缓存这个组件。在组件被激活时，我们可以在activated钩子中检查用户信息是否过期，如果过期则重新获取数据；在组件被停用时，我们可以在deactivated钩子中取消正在进行的数据请求，避免资源浪费。代码示例如下：

<template>
  <keep-alive>
    <router-view></router-view>
  </keep-alive>
</template>
<script>
import { onActivated, onDeactivated } from 'vue';
export default {
  setup() {
    onActivated(() => {
      // 检查用户信息是否过期，过期则重新获取数据
      console.log('Component activated, check user info');
    });
    onDeactivated(() => {
      // 取消正在进行的数据请求
      console.log('Component deactivated, cancel data request');
    });
  }
};
</script>

用于错误处理的 onErrorCaptured

onErrorCaptured是 Vue3 中一个非常重要的错误处理钩子。它的作用是捕获来自子孙组件的错误，让我们可以在组件的层面统一处理这些错误，避免错误向上传播导致整个应用崩溃。

onErrorCaptured钩子会在捕获到子孙组件的错误时被调用，它接收三个参数：错误对象、发生错误的组件实例以及一个包含错误来源类型的信息字符串。在这个钩子中，我们可以进行一些错误处理操作，比如记录错误日志、显示错误提示给用户等。

假设我们有一个组件，它包含了多个子组件，其中一个子组件在渲染时可能会抛出错误。我们可以在父组件中使用onErrorCaptured钩子来捕获这个错误，并进行相应的处理：

<template>
  <div>
    <child-component></child-component>
  </div>
</template>
<script>
import { onErrorCaptured } from 'vue';
import ChildComponent from './ChildComponent.vue';
export default {
  components: {
    ChildComponent
  },
  setup() {
    onErrorCaptured((error, instance, info) => {
      // 记录错误日志
      console.error('Error captured:', error);
      console.log('Error source:', info);
      // 显示错误提示给用户
      alert('An error occurred. Please try again later.');
      // 阻止错误继续向上传播
      return true;
    });
  }
};
</script>

在这个例子中，当ChildComponent抛出错误时，onErrorCaptured钩子会被触发。我们在钩子中记录了错误日志，并显示了一个错误提示给用户。最后，通过返回true，我们阻止了错误继续向上传播，避免了错误影响到其他组件。需要注意的是，如果onErrorCaptured钩子本身抛出了错误，那么这个错误和原始捕获到的错误都会被发送到应用级的app.config.errorHandler（前提是这个函数已经定义）。

注意事项及常见错误

在使用 Vue3 生命周期钩子时，有一些注意事项和常见错误需要我们特别关注，避免在开发过程中出现不必要的问题。

避免在错误的钩子中操作 DOM

在 Vue3 的生命周期中，不同的钩子有不同的执行时机，这就决定了我们在哪些钩子中可以安全地操作 DOM 。一个常见的错误是在created钩子中尝试操作 DOM 。由于created钩子在组件实例创建完成后，DOM 尚未挂载时触发，此时获取 DOM 元素会返回null或undefined，导致操作失败。例如：

<template>
  <div id="myDiv">This is a div</div>
</template>
<script>
export default {
  created() {
    const div = document.getElementById('myDiv');
    if (div) {
      div.textContent = 'Updated content';
    }
  }
};
</script>

在这个例子中，created钩子中获取myDiv元素会失败，因为此时 DOM 还没有挂载到页面上。正确的做法是在mounted钩子中进行 DOM 操作，因为mounted钩子在组件挂载到 DOM 后触发，此时可以确保 DOM 元素已经存在。修改后的代码如下：

<template>
  <div id="myDiv">This is a div</div>
</template>
<script>
export default {
  mounted() {
    const div = document.getElementById('myDiv');
    if (div) {
      div.textContent = 'Updated content';
    }
  }
};
</script>

注意选项式和组合式 API 钩子的执行顺序

当同时使用选项式 API 和组合式 API 的生命周期钩子时，一定要清楚它们的执行顺序。如前文所述，组合式 API 的钩子会在选项式 API 的钩子之前执行。如果对这个顺序不了解，可能会导致一些逻辑错误。比如，在一个组件中，我们同时在setup函数中使用onMounted钩子和在选项式 API 中使用mounted钩子，并且在这两个钩子中都进行了数据请求操作。如果我们期望选项式 API 中的mounted钩子先获取数据并处理，然后再由组合式 API 中的onMounted钩子进行后续操作，就会出现问题，因为实际执行顺序是onMounted先执行。为了避免这种错误，我们在开发过程中要明确自己的需求，并根据钩子的执行顺序来编写代码。

正确使用 setup 函数

setup函数作为 Vue3 组合式 API 的核心，在使用时也有一些需要注意的地方。首先，setup函数中不能直接访问this，因为this指向undefined 。如果我们在setup函数中不小心使用了this来访问组件实例的属性或方法，就会导致错误。其次，setup函数的返回值有特定的用途，如果返回一个对象，对象中的属性和方法可以在模板中直接使用；如果返回一个渲染函数，则可以自定义渲染内容。如果返回值不符合要求，也会导致组件无法正常渲染。例如，我们在setup函数中定义了一些数据和方法，但没有正确返回，模板中就无法访问这些数据和方法。正确的做法是确保返回值包含我们需要在模板中使用的所有数据和方法。

理解新增钩子的使用场景

对于 Vue3 新增的钩子，如onActivated、onDeactivated和onErrorCaptured，我们要深入理解它们的使用场景。如果在不需要缓存组件的情况下使用onActivated和onDeactivated钩子，或者在没有错误处理需求的情况下使用onErrorCaptured钩子，不仅会增加代码的复杂性，还可能导致一些不必要的性能开销。相反，如果在需要缓存组件或进行错误处理的场景中没有使用这些钩子，就无法充分发挥 Vue3 的特性。因此，在使用这些新增钩子时，要根据具体的业务需求来判断是否需要使用，并确保正确使用它们。

总结回顾

Vue3 的初始化生命周期在组合式 API 和选项式 API 的结合下，为开发者提供了更强大、更灵活的组件管理能力。在组合式 API 中，setup函数是初始化逻辑的核心，它替代了beforeCreate和created的部分功能，让我们可以在组件创建的早期阶段进行响应式数据的定义和逻辑处理。onBeforeMount和onMounted钩子则分别在组件挂载前后发挥重要作用，确保我们在合适的时机进行 DOM 相关的操作和数据请求。

选项式 API 的生命周期钩子依然有效，并且在与组合式 API 同时使用时，有着明确的执行顺序。这使得我们在进行项目开发时，可以根据具体需求选择合适的 API 风格，或者将两者结合使用，以达到最佳的开发效果。

此外，Vue3 新增的activated、deactivated和onErrorCaptured钩子，为我们处理缓存组件和错误提供了更加便捷和高效的方式。通过合理运用这些钩子，我们可以提升应用的性能和稳定性，为用户提供更好的体验。

在实际开发中，我们要深入理解 Vue3 生命周期的各个阶段和钩子的作用，避免常见的错误，如在错误的钩子中操作 DOM、混淆选项式和组合式 API 钩子的执行顺序等。只有这样，我们才能充分发挥 Vue3 的优势，开发出高质量的前端应用。希望本文能帮助大家更好地掌握 Vue3 初始化生命周期的相关知识，在前端开发的道路上更上一层楼。

进一步学习资源推荐

如果你想要更深入地学习 Vue3 生命周期相关知识，以下这些资源一定能满足你的需求：

Vue3 官方文档：这是学习 Vue3 的第一手资料，其中对生命周期的介绍详细且权威，包含了各种钩子的使用方法、执行顺序以及与组合式 API 和选项式 API 的结合使用示例，是深入学习的基础。比如在官方文档的生命周期章节，有清晰的生命周期图示和代码示例，帮助你直观理解各个阶段的执行逻辑。

VueUse：这是一个实用的 Vue 组合式函数库，其中包含了许多与生命周期相关的工具函数和示例。在其官方仓库中，你可以找到各种场景下如何使用生命周期钩子进行状态管理、副作用处理等，为你的项目开发提供灵感和参考。

Vue3 开源项目：在 GitHub 上有许多优秀的 Vue3 开源项目，如vue-vben-admin 、vue3-composition-admin 等。通过阅读这些项目的源码，你可以学习到在实际项目中如何合理运用 Vue3 的生命周期钩子，优化组件的性能和逻辑。