当前位置：首页 > article >正文

【前端高频面试题--Vue生命周期篇】

article 2024/9/23 15:29:08

🚀 作者 ：“码上有前”
🚀 文章简介 ：前端高频面试题
🚀 欢迎小伙伴们 点赞👍、收藏⭐、留言💬

前端高频面试题--Vue生命周期篇

Vue的生命周期
Vue子组件和父组件执行顺序
在哪个生命周期请求异步数据
keep-alive 中的生命周期哪些

Vue的生命周期

Vue.js 的生命周期是指在组件创建、挂载、更新和销毁过程中触发的一系列钩子函数。这些钩子函数可以让我们在特定的时刻执行自定义的逻辑。

Vue.js 的生命周期可以分为以下几个阶段：

创建阶段：
- beforeCreate：在实例被创建之后，但是在数据观测和事件/钩子函数初始化之前调用。此时，组件的数据和方法还未初始化。
- created：在实例创建完成后调用。此时，组件的数据已经初始化，可以访问 data 中的数据和 methods 中的方法，但尚未挂载到 DOM 上。
挂载阶段：
- beforeMount：在挂载开始之前被调用。此时，模板已经编译完成，但尚未将模板渲染到真实的 DOM 中。
- mounted：在挂载完成后被调用。此时，组件已经被挂载到 DOM 上，可以进行 DOM 操作，也可以访问到通过 ref 获取的 DOM 元素。
更新阶段：
- beforeUpdate：在数据更新之前调用。此时，已经接收到新的数据，但是 DOM 尚未更新。
- updated：在数据更新完成后调用。此时，组件的数据已经更新，DOM 也已经重新渲染。
销毁阶段：
- beforeUnmount（Vue 2.x）/ beforeDestroy（Vue 3.x）：在实例销毁之前调用。此时，组件实例仍然完全可用。
- unmounted（Vue 2.x）/ unmounted（Vue 3.x）：在实例销毁后调用。此时，组件实例已经被销毁，对应的 DOM 也会被移除。

除了上述的主要生命周期钩子函数外，Vue 还提供了其他一些较少使用的钩子函数，例如 activated（组件被激活时调用）和 deactivated（组件被停用时调用），以及 errorCaptured（捕获组件内部错误）等。

在生命周期函数中，我们可以执行一些初始化操作、发送网络请求、订阅事件、操作 DOM 等。生命周期函数提供了一种管理组件行为的方式，使我们能够在不同的时刻执行相应的逻辑。

需要注意的是，在 Vue 3 中，一些生命周期钩子函数的名称发生了变化，例如 beforeMount 在 Vue 3 中被重命名为 beforeMount，beforeUnmount 取代了 beforeDestroy。这是由于 Vue 3 采用了 Composition API 的新特性，以及对应用程序的性能优化进行了改进。

Vue子组件和父组件执行顺序

在 Vue 中，子组件和父组件的生命周期钩子函数的执行顺序如下：

父组件：
- beforeCreate
- created
- beforeMount
- 子组件的 beforeCreate 和 created 钩子函数
- mounted
- 子组件的 beforeMount 和 mounted 钩子函数
子组件：
- beforeCreate
- created
- beforeMount
- mounted

在父组件的生命周期中，子组件的 beforeCreate 和 created 钩子函数会在父组件的 beforeCreate 和 created 钩子函数之后执行。因为子组件的实例化和初始化是在父组件的 created 钩子函数之后进行的。

在父组件的 beforeMount 和 mounted 钩子函数中，子组件的 beforeMount 和 mounted 钩子函数会在父组件的 beforeMount 和 mounted 钩子函数之后执行。这是因为在父组件的 mount 过程中，会先处理父组件的模板，然后才会处理子组件的模板。

需要注意的是，父组件的 updated 钩子函数会在子组件的 updated 钩子函数之后执行。这是因为在更新过程中，先更新子组件，然后再更新父组件。

总的来说，父组件的生命周期钩子函数会在子组件的生命周期钩子函数之前执行，而在子组件的生命周期钩子函数中，beforeCreate 和 created 钩子函数会在 beforeMount 和 mounted 钩子函数之前执行。这样的顺序确保了父子组件之间的正确初始化和挂载过程。

在哪个生命周期请求异步数据

在 Vue.js 中，常常在组件的 “created” 生命周期钩子函数中请求异步数据。“created” 钩子函数是在组件实例创建完成之后立即被调用的，并且此时组件的数据已经初始化，可以进行异步请求。

在 “created” 钩子函数中请求异步数据的常见做法是使用异步函数（如 axios、fetch 等）或者调用组件自定义的方法来发起请求。通过异步请求获取到的数据可以保存在组件的 data 属性中，从而在模板中进行渲染。

以下是一个示例代码，展示了如何在 Vue 组件的 “created” 钩子函数中请求异步数据：

<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.title }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: []  // 初始化数据为空数组
    };
  },
  created() {
    this.fetchData(); // 在 created 钩子函数中调用 fetchData 方法
  },
  methods: {
    fetchData() {
      // 发起异步请求
      // 假设使用 axios 库进行请求
      axios.get('https://api.example.com/items')
        .then(response => {
          this.items = response.data; // 将获取到的数据保存到组件的 data 属性中
        })
        .catch(error => {
          console.error(error);
        });
    }
  }
};
</script>

在上述示例中，我们在 “created” 钩子函数中调用了 “fetchData” 方法来发起异步请求，并将获取到的数据保存在组件的 “items” 数据属性中。这样，当组件被创建后，异步数据会被加载并在模板中进行渲染。

keep-alive 中的生命周期哪些

在 Vue.js 中，使用 <keep-alive> 组件可以将动态组件进行缓存，以避免组件的重复创建和销毁，提高性能。当组件被 <keep-alive> 包裹时，它会有一些特殊的生命周期钩子函数。

以下是 <keep-alive> 组件中的生命周期钩子函数：

activated：在被包裹的组件被激活时调用。当组件切换到活跃状态时（从缓存中取出），会触发该钩子函数。
deactivated：在被包裹的组件被停用时调用。当组件切换到非活跃状态时（被缓存），会触发该钩子函数。

这两个钩子函数的使用场景如下：

activated 和 deactivated 钩子函数通常用于需要在组件切换时执行一些特定逻辑的场景，例如在组件切换到活跃状态时重新加载数据，或者在组件切换到非活跃状态时清除不必要的资源。

需要注意的是，activated 和 deactivated 钩子函数只对被 <keep-alive> 包裹的组件生效，对于其他组件不会触发。

以下是示例代码，演示了在 <keep-alive> 组件中使用 activated 和 deactivated 钩子函数：

<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello!',
    };
  },
  activated() {
    console.log('Component activated');
    // 在组件被激活时执行特定逻辑，例如重新加载数据
    this.loadData();
  },
  deactivated() {
    console.log('Component deactivated');
    // 在组件被停用时执行特定逻辑，例如清除资源
    this.clearData();
  },
  methods: {
    loadData() {
      // 加载数据逻辑
    },
    clearData() {
      // 清除资源逻辑
    },
  },
};
</script>