深入理解vue组件生命周期，你一定要看到最后，最后有深入探讨

文章目录

一、引言

1. Vue 3 的简介和背景

Vue.js 是一个流行的前端 JavaScript 框架，以其简洁的 API、响应式数据绑定和组件化系统而闻名。Vue 3 是 Vue.js 的最新版本，它引入了许多新特性和改进，以进一步提高开发效率和应用程序性能。Vue 3 通过优化底层架构、减少包体积和提供更好的 TypeScript 支持等方式，为现代前端开发提供了更强大的工具。

2. 生命周期钩子在 Vue 中的重要性

每个 Vue 组件实例在创建时都需要经历一系列的初始化步骤。

生命周期钩子是 Vue 组件中的关键概念，它们允许开发者在组件的不同阶段执行特定的逻辑。通过使用生命周期钩子，我们可以控制组件的创建、挂载、更新和卸载过程，从而实现更细粒度的控制和优化。

生命周期钩子对于数据初始化、事件监听、条件渲染和异步操作等方面非常有用。了解并正确使用生命周期钩子可以帮助我们编写更加健壮、可维护和高效的 Vue 应用程序。

3. Vue 3 生命周期钩子的变化概述

与 Vue 2 相比，Vue 3 对生命周期钩子进行了一些调整和优化。最显著的变化是将一些钩子进行了重命名，并引入了新的组合式 API，如 setup() 函数。这些变化旨在提供更清晰、更灵活的钩子使用方式，同时保持与 Vue 2 的兼容性。

在 Vue 3 中，我们仍然可以使用熟悉的钩子名称（尽管有些名称已经改变），但它们的使用方式和最佳实践可能会有所不同。因此，了解这些变化以及如何在 Vue 3 中使用新的生命周期钩子是非常重要的。

二、Vue 3 生命周期钩子简介

1. 生命周期钩子的定义和作用

生命周期钩子，在 Vue 框架中，是指一组特定的函数，它们会在 Vue 组件的不同生命周期阶段被自动调用。这些钩子允许开发者在组件的生命周期中的特定时刻插入自定义的代码逻辑，从而实现对组件行为的更细致控制。通过生命周期钩子，我们可以管理组件的状态、处理用户输入、发起网络请求、执行副作用操作等。

2. Vue 3 中的生命周期钩子与 Vue 2 的对比

在 Vue 3 中，生命周期钩子的概念依然存在，但有一些显著的变化。首先，Vue 3 对部分钩子的命名进行了调整，以使其更符合逻辑和易于理解。例如，Vue 2 中的 beforeDestroy 和 destroyed 钩子在 Vue 3 中被重命名为 beforeUnmount 和 unmounted。

其次，Vue 3 引入了组合式 API（Composition API），这是一种新的方式来组织和共享代码逻辑。在组合式 API 中，生命周期钩子主要通过 setup() 函数来访问，这使得钩子的使用更加灵活和可组合。

尽管有这些变化，但 Vue 3 仍然保留了与 Vue 2 的兼容性，因此开发者可以根据自己的需要选择使用新的或旧的钩子方式。

3. Vue 3 生命周期钩子的分类

在这里插入图片描述

Vue 3 的生命周期钩子可以根据它们在组件生命周期中的不同阶段进行分类。通常，这些钩子被分为以下四个主要类别：

  • 创建阶段钩子：包括 beforeCreate 和 created。这些钩子在组件实例被创建后立即调用，通常用于初始化组件的状态和属性。

  • 挂载阶段钩子：包括 beforeMount 和 mounted。这些钩子在组件的模板被挂载到 DOM 之前和之后调用，常用于执行与 DOM 相关的操作或发起异步请求。

  • 更新阶段钩子：包括 beforeUpdate 和 updated。当组件的数据发生变化时，这些钩子会在 DOM 更新之前和之后被调用，适用于在更新过程中执行额外的逻辑。

  • 卸载阶段钩子：包括 beforeUnmount 和 unmounted。这些钩子在组件即将被卸载和卸载完成后调用，常用于执行清理工作，如取消定时器、移除事件监听器等。

三、Vue 3 生命周期钩子详解

在 Vue 3 中，组件的生命周期被明确地划分为不同的阶段，每个阶段都提供了特定的钩子函数供开发者使用。以下是对这些钩子函数的详细解释，包括它们的注意事项和常见使用场景。

1 创建阶段

  • beforeCreate:

    • 这是组件生命周期中的第一个钩子，此时组件的实例已经创建，但数据响应性和事件尚未设置，即 props、data 和 methods 等属性尚未被初始化。
    • 注意事项：由于此时组件的数据还未初始化，因此无法访问到 this.data 或其他组件属性。
    • 使用场景：通常不在此阶段进行重要的逻辑操作，因为它太早了，很多必要的组件设置都还未完成。

  • created:

    • 此阶段组件的实例已经完成创建，并且数据响应性、计算属性、方法和侦听器等都已经设置好。这意味着可以访问到 this.data 和其他组件属性。
    • 注意事项：虽然可以访问到组件的数据和方法，但模板还未编译，DOM 也未生成。
    • 使用场景：常用于执行一些初始化操作，如发起网络请求获取数据、设置定时器或订阅事件等。

2 挂载阶段

  • beforeMount:

    • 在模板编译和挂载之前调用。此时，模板已经编译成虚拟 DOM，但尚未挂载到真实 DOM 上。
    • 注意事项：在这个阶段，仍然可以对组件的实例进行更改，这些更改将反映在最终的 DOM 输出中。
    • 使用场景：可以在此时对即将挂载的虚拟 DOM 进行一些预处理操作。

  • mounted:

    • 组件已经成功挂载到 DOM 上，可以访问到真实的 DOM 元素。
    • 注意事项：此时可以安全地操作 DOM，因为模板已经渲染完毕。
    • 使用场景：常用于执行依赖于 DOM 的操作，如使用第三方库、设置动画或初始化与 DOM 相关的插件等。
export default {
  mounted() {
    console.log(`the component is now mounted.`)
  }
}
  • 1
  • 2
  • 3
  • 4
  • 5

3更新阶段

  • beforeUpdate:

    • 当组件的数据发生变化时，在 DOM 更新之前调用。此时，可以访问到更新后的数据，但 DOM 仍然是旧的。
    • 注意事项：避免在此阶段进行耗时的操作，因为它会阻塞 DOM 的更新。
    • 使用场景：可以在此时进行一些数据更新前的准备工作，或者根据新旧数据的变化执行一些特定的逻辑。

  • updated:

    • 组件的 DOM 已经更新完毕，此时可以访问到最新的 DOM 结构。
    • 注意事项：由于 DOM 已经更新，所以在此阶段进行的任何 DOM 操作都应该基于最新的 DOM 结构。
    • 使用场景：常用于执行一些需要在 DOM 更新后进行的操作，如更新第三方库的状态、重新计算布局或触发自定义的回调函数等。

4 卸载阶段

  • beforeUnmount:

    • 在组件即将卸载之前调用。此时，组件仍然完全可用，但即将被从 DOM 中移除。
    • 注意事项：应该在此阶段进行必要的清理工作，以避免内存泄漏或其他潜在问题。
    • 使用场景：常用于取消网络请求、清除定时器、解绑全局事件监听器或销毁与组件相关的资源等。

  • unmounted:

    • 组件已经成功从 DOM 中卸载，并且所有的事件监听器和子组件都已经被移除。
    • 注意事项：此时组件已经完全销毁，无法再进行任何操作。
    • 使用场景：由于组件已经被卸载，所以通常不在此阶段执行任何逻辑。这个钩子更多地是作为一个信号，表明组件的生命周期已经结束。

四、Vue 3 新增的组合式 API 与生命周期

Vue 3 引入了组合式 API，这是一种新的编写组件逻辑的方式，它提供了更大的灵活性和更好的代码组织。组合式 API 的核心是 setup() 函数，它是组件内部的一个新的入口点，允许我们使用响应式状态、计算属性、侦听器和生命周期钩子等。

1. setup() 函数简介

setup() 函数是 Vue 3 组件中新增的一个选项，用于替代 Vue 2 中的部分选项（如 data、computed、methods 等）。它接收两个参数：props 和 context，分别代表父组件传入的属性和当前组件的上下文。setup() 函数在组件的 beforeCreate 和 created 生命周期钩子之间调用，此时组件的实例已经被创建，但模板还未编译和挂载。

在 setup() 函数中，我们可以使用 Vue 3 提供的 ref 和 reactive 函数来创建响应式数据，以及 computed 和 watch 函数来处理计算属性和侦听器。此外，还可以通过 onMounted、onUpdated、onUnmounted 等函数来访问生命周期钩子。

2. 在 setup() 中使用生命周期钩子

在 Vue 3 的组合式 API 中，生命周期钩子可以通过 onXXX 的形式在 setup() 函数中使用。这些函数接收一个回调函数作为参数，当对应的生命周期阶段到达时，回调函数会被自动调用。

例如，onMounted 钩子可以在组件挂载后执行一些操作，如访问 DOM 元素或发起网络请求。通过在 setup() 函数中调用 onMounted 并传入相应的回调函数，我们可以在组件挂载后执行自定义的逻辑。

<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { ref, onMounted, onUnmounted } from 'vue';

export default {
  name: 'CounterComponent',
  setup() {
    // 响应式状态
    const count = ref(0);

    // 方法
    const increment = () => {
      count.value++;
    };

    // 生命周期钩子 - 挂载阶段
    onMounted(() => {
      console.log('Component is mounted');
      // 这里可以执行一些仅在组件挂载后需要的操作
    });

    // 生命周期钩子 - 卸载阶段
    onUnmounted(() => {
      console.log('Component is unmounted');
      // 这里可以执行一些清理工作，比如取消定时器或移除事件监听器
    });

    // 返回给模板的值
    return {
      count,
      increment,
    };
  },
};
</script>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41

在这个例子中，我们创建了一个简单的计数器组件。在 setup() 函数中，我们使用 ref 创建了一个响应式的 count 变量，并定义了一个 increment 方法来增加计数。然后，我们使用 onMounted 和 onUnmounted 生命周期钩子函数来在组件挂载和卸载时执行特定的操作。这些操作可以是初始化代码、添加事件监听器、发起网络请求或任何需要在特定生命周期阶段执行的逻辑。

请注意，在 Vue 3 中，你不再需要像 Vue 2 那样在组件选项中（如 mounted 或 beforeMount）定义生命周期钩子。相反，你可以在 setup() 函数中使用 onXXX 函数来访问这些钩子，这使得代码更加集中和可维护。

3. 与选项式 API 的对比和选择建议

组合式 API 与 Vue 2 中使用的选项式 API（如 data、methods、computed 等选项）相比，提供了更加灵活和可维护的代码结构。通过组合式 API，我们可以将相关的逻辑代码组织在一起，而不是按照选项的类型进行划分，这有助于提高代码的可读性和可维护性。

在选择使用组合式 API 还是选项式 API 时，可以考虑以下因素：

  • 组件的复杂性：对于简单的组件，选项式 API 仍然是一个很好的选择，因为它简单明了。然而，对于复杂的组件，组合式 API 可能更适合，因为它提供了更好的代码组织和逻辑复用能力。
  • 团队习惯和约定：如果团队已经习惯了 Vue 2 的选项式 API，并且没有遇到太大的问题，那么可以继续使用它。然而，如果团队希望尝试新的编程模式或提高代码质量，那么可以考虑采用组合式 API。
  • 迁移成本和学习曲线：从选项式 API 迁移到组合式 API 可能需要一些时间和努力，因为两者在编程模式和思维方式上有所不同。同时，组合式 API 也引入了一些新的概念和 API，需要团队成员进行学习和掌握。因此，在决定是否采用组合式 API 时，需要权衡这些成本和收益。

总的来说，组合式 API 是 Vue 3 中的一个重要特性，它提供了更加灵活和可维护的代码结构。然而，在选择是否使用它时，需要根据项目的实际情况和团队的需求进行权衡和决策。

五、Vue 3 生命周期钩子的实际应用

Vue 3 的生命周期钩子在组件的实际应用中扮演着重要的角色，它们不仅可以帮助我们更好地管理组件的生命周期，还可以在组件通信、数据请求与处理以及性能优化等方面发挥关键作用。

1. 生命周期钩子在组件通信中的作用

在 Vue 组件中，经常需要在不同的组件之间传递数据或消息。生命周期钩子可以在特定的时刻触发自定义的事件或回调，从而实现组件之间的通信。

例如，假设有一个子组件需要在数据更新后通知父组件，可以在子组件的 updated 钩子中触发一个自定义事件：

<template>
  <!-- 子组件模板 -->
</template>

<script>
export default {
  name: 'ChildComponent',
  props: ['childData'],
  watch: {
    // 监听 childData 的变化
    childData(newVal, oldVal) {
      // 处理数据变化
      this.$emit('update:data', newVal); // 触发自定义事件
    }
  },
  updated() {
    // 也可以在这里触发事件，表示组件已经更新
  }
};
</script>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20

在父组件中，可以通过监听这个自定义事件来接收子组件的通知：

<template>
  <ChildComponent :childData="parentData" @update:data="handleUpdate" />
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentData: 'Initial Data'
    };
  },
  methods: {
    handleUpdate(newData) {
      // 处理子组件传来的新数据
    }
  }
};
</script>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23

注意：上面的例子使用了 watch 来监听 prop 的变化，实际上在 Vue 3 中更推荐使用 watchEffect 或 computed 在 setup() 中进行响应式处理。此外，组件通信也可以使用 Vue 提供的 provide/inject 机制或全局状态管理库（如 Vuex）。

2. 生命周期钩子在数据请求与处理中的应用

在 Vue 组件中，经常需要在特定的生命周期阶段发起网络请求或处理异步数据。生命周期钩子可以帮助我们在正确的时机执行这些操作。

例如，在组件挂载时获取数据，并在数据更新时重新获取：

<template>
  <div>{{ data }}</div>
</template>

<script>
import { ref, onMounted, onUpdated } from 'vue';
import axios from 'axios';

export default {
  setup() {
    const data = ref(null);

    const fetchData = async () => {
      try {
        const response = await axios.get('https://api.example.com/data');
        data.value = response.data;
      } catch (error) {
        console.error('Error fetching data:', error);
      }
    };

    onMounted(fetchData); // 组件挂载时获取数据
    onUpdated(fetchData); // 组件更新时重新获取数据（注意：这可能不是最佳实践，因为每次更新都会触发请求）

    return { data };
  }
};
</script>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28

注意：在上面的例子中，onUpdated 钩子被用来在每次组件更新时重新获取数据，但这通常不是一个好的做法，因为它可能导致不必要的网络请求。更常见的做法是在依赖的数据变化时使用 watchEffect 或 watch 来触发请求。

3. 生命周期钩子在性能优化中的实践

生命周期钩子可以帮助我们优化组件的性能，例如通过延迟加载、分块渲染或条件渲染等方式。

假设我们有一个组件，它包含一些重型的子组件，这些子组件的渲染开销很大。我们可以使用 v-if 指令和生命周期钩子来控制这些子组件的渲染时机：

<template>
  <div>
    <HeavyComponent v-if="isComponentReady" />
  </div>
</template>

<script>
import { ref, onMounted, nextTick } from 'vue';
import HeavyComponent from './HeavyComponent.vue';

export default {
  components: {
    HeavyComponent
  },
  setup() {
    const isComponentReady = ref(false);

    onMounted(async () => {
      // 等待下一个 DOM 更新周期
      await nextTick();
      // 模拟一些异步操作，比如数据加载
      await new Promise(resolve => setTimeout(resolve, 2000));
      // 标记组件为准备好，开始渲染 HeavyComponent
      isComponentReady.value = true;
    });

    return { isComponentReady };
  }
};
</script>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30

在这个例子中，HeavyComponent 最初不会被渲染，而是在 onMounted 钩子中通过异步操作模拟数据加载或其他准备工作，完成之后再将 isComponentReady 设置为 true，从而触发 HeavyComponent 的渲染。这样做可以避免页面加载时的阻塞，提高用户体验。

六、深入思考

1. vue父组件如何监听子组件生命周期

  1. 通过在子组件生命周期里公开一个事件，通过父组件监听：
// 在子组件中
mounted(){
  this.$emit('mounted','mounted 触发了')
},
// 父组件监听
<child-component @mounted="handleDoSomething"></child-component>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  1. vue2中的@hook事件监听
   <child-component @hook:mounted="handleDoSomething"></child-component>
  • 1
  1. vue3中类似上面的@hook@vue:mounted="jhMounted"

2. 父组件和子组件哪个先渲染

首先我的答案是：某种意义上来说，他们是同时渲染到浏览器上的。
这是一个更深入的问题，而且涉及到 Vue.js 渲染机制的细节。首先，我们来澄清一下“渲染”这个词在不同上下文中可能有不同的含义。

在 Vue.js 的上下文中，当我们谈论组件的“渲染”时，我们可能指的是以下几个不同的过程：

  1. 虚拟 DOM 的构建：在这个过程中，Vue 将组件的模板编译成虚拟 DOM（一个轻量级的 JavaScript 对象，它代表了将要渲染到实际 DOM 中的结构）。对于父组件和子组件，这个过程是自上而下的。首先，父组件的模板被编译成虚拟 DOM，然后递归地，所有子组件的模板也被编译并嵌入到父组件的虚拟 DOM 中。

  2. DOM 的挂载/更新：一旦虚拟 DOM 构建完成，Vue 会将其与实际的 DOM 进行同步（也称为“挂载”或“补丁”）。在这个过程中，Vue 会计算出虚拟 DOM 与实际 DOM 之间的差异，并仅更新那些差异，而不是重新渲染整个页面。这个过程可以看作是“一起”发生的，因为最终的结果是一个更新的 DOM 树，其中包含了父组件和所有子组件的元素。

从这个角度来看，他们是同时渲染到浏览器上的。实际上，最终的 DOM 渲染结果包含了父组件和所有子组件的元素，而且它们通常是作为一个整体被浏览器渲染的。但是，在逻辑上，我们可以区分出父组件和子组件的渲染过程，因为子组件的虚拟 DOM 是作为父组件虚拟 DOM 的一部分被构建和处理的。

所以，如果我们要非常严格地回答“父组件和子组件哪个先渲染？”这个问题，答案可能取决于我们对“渲染”的定义。如果我们将其定义为虚拟 DOM 的构建过程，那么父组件的虚拟 DOM 会先被构建，然后是其子组件的。但如果我们将其定义为实际的 DOM 更新/挂载过程，那么这个过程可以看作是一起发生的，因为最终的 DOM 树是包含父组件和所有子组件元素的一个整体。

3. 父子组件生命周期的过程

在 Vue 3 中，当父组件开始其生命周期时，它首先会执行自己的 beforeCreate 和 created 钩子函数。在这两个钩子函数执行期间，父组件会初始化其数据、属性和方法等。

接下来，父组件会执行 beforeMount 钩子函数。但是，在这个钩子函数执行之前，Vue 会先递归地初始化并挂载所有子组件。这意味着子组件的 beforeCreate、created、beforeMount 和 mounted 钩子函数会在这个时候按照顺序被调用。

子组件的 mounted 钩子函数是在其 DOM 被挂载到页面上之后执行的。尽管在这个时候父组件的 beforeMount 钩子函数还没有执行完，但是 Vue 已经为子组件创建了一个临时的挂载点，并将其 DOM 挂载到了这个临时挂载点上。这样，子组件就可以在其父组件完全挂载之前被渲染和显示。

最后，当所有子组件都被初始化并挂载之后，父组件的 mounted 钩子函数会被执行，标志着父组件也被完全挂载到了页面上。

以下是父组件和子组件生命周期钩子的典型执行顺序：

  1. 父组件 beforeCreate

  2. 父组件 created

  3. 父组件 beforeMount

  4. 子组件 beforeCreate

  5. 子组件 created

  6. 子组件 beforeMount

  7. 子组件 mounted

  8. 父组件 mounted

当父组件的 mounted 钩子被调用时，所有子组件的渲染过程（包括它们的 mounted 钩子）都已经完成。

如果您在阅读本博客时产生了任何疑问或新的思考，欢迎在下方评论区留言，与我一同探讨，让我们共同学习，共同进步。

感谢您抽出宝贵的时间阅读本博客，您的支持是我继续创作的最大动力。

注：本文转载自blog.csdn.net的极客岛的文章"https://whr2349.blog.csdn.net/article/details/135548628"。版权归原作者所有，此博客不拥有其著作权，亦不承担相应法律责任。如有侵权，请联系我们删除。
复制链接
相关推荐
发表评论

评论记录：

未查询到任何数据！