Vue 生命周期详解、面试常问问题案例 含 demo

一、Vue 生命周期是什么

Vue 实例从创建到销毁的过程，称为其生命周期。在这个过程中，Vue 提供了一系列的生命周期钩子函数，允许我们在特定的时刻执行代码，从而更灵活地控制组件的行为和性能。

二、Vue 中如何使用生命周期钩子

1. beforeCreate

在实例初始化之后，数据观测（data observer）和 event/watcher 事件配置之前被调用。此时，组件的数据和方法尚未初始化。

2. created

实例已经创建完成之后被调用。在这一步，实例已完成数据观测、属性和方法的运算，watch/event 事件回调也已配置。然而，挂载阶段还没开始，$el 属性目前不可见。

3. beforeMount

在挂载开始之前被调用：相关的 render 函数首次被调用。此时，模板中的 HTML 尚未渲染到页面中。

4. mounted

el 被新创建的 vm.$el替换，并挂载到实例上去之后调用该钩子。如果root实例挂载了一个文档内元素，当mounted被调用时vm.$el 也在文档内。此时，可以进行 DOM 操作或执行依赖于 DOM 的操作。

5. beforeUpdate

数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。

6. updated

由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。当这个钩子被调用时，组件 DOM 已经更新，所以你可以执行依赖于 DOM 的操作。

7. beforeDestroy

实例销毁之前调用。在这一步，实例仍然完全可用。此时，可以进行清理工作，如移除事件监听器、定时器等。

8. destroyed

Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

三、Vue 生命周期包含哪些属性或方法 API

Vue 生命周期本身不直接包含属性或方法 API，但它与 Vue 实例的其他属性和方法紧密相关。在生命周期的不同阶段，你可以访问和调用 Vue 实例的数据、方法、计算属性、侦听器等。

四、扩展与高级技巧

1. 使用生命周期钩子进行性能优化

避免在 beforeUpdate 和 updated 中进行大量的 DOM 操作，以免影响性能。利用 beforeDestroy 进行必要的资源清理，防止内存泄漏。

2. 结合 Vuex 使用生命周期钩子

在 Vuex 的 store 中，你也可以利用生命周期钩子来执行一些特定的逻辑，如在 created 钩子中初始化 store 数据。

3. 在服务器端渲染（SSR）中使用生命周期钩子

在 SSR 中，只有 beforeCreate 和 created 钩子会被调用。因此，你需要特别注意在这两个钩子中编写的代码，确保它们不会在客户端再次执行导致问题。

4. 利用生命周期钩子进行组件间的通信

在某些情况下，你可以利用生命周期钩子来触发自定义事件或调用父组件的方法，从而实现组件间的通信。

5. 使用 nextTick

在 mounted 或 updated 钩子中，如果你需要等待 Vue 完成 DOM 更新后再执行某些操作，可以使用 Vue.nextTick() 方法。

五、优点与缺点

1. 优点

• 更好的控制：生命周期钩子提供了更好的控制组件行为和性能的能力。
• 更清晰的逻辑：通过将逻辑放在特定的生命周期钩子中，可以使代码更加清晰和易于维护。
• 更易于调试：利用生命周期钩子，你可以更容易地调试和跟踪组件的状态变化。

2. 缺点

• 可能导致性能问题：如果在生命周期钩子中执行过多的逻辑或 DOM 操作，可能会导致性能问题。
• 容易滥用：有时开发者可能会滥用生命周期钩子，导致代码难以理解和维护。

六、对应“八股文”或面试常问问题

1. Vue 生命周期有哪些钩子函数？

答：Vue 生命周期包括 beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy 和 destroyed 等钩子函数。

2. 请描述 Vue 实例从创建到销毁的过程。

答：Vue 实例从创建到销毁的过程包括初始化数据、配置事件监听器、编译模板、挂载 DOM、响应数据变化、更新 DOM 以及销毁实例等步骤。在这个过程中，Vue 提供了生命周期钩子函数，允许我们在特定的时刻执行代码。

3. 在 Vue 生命周期中，哪个钩子函数适合进行 DOM 操作？

答：在 Vue 生命周期中，mounted 钩子函数适合进行 DOM 操作。因为此时组件已经挂载到 DOM 上，可以进行 DOM 查询和修改。

4. 如何在 Vue 组件销毁时进行资源清理？

答：在 Vue 组件销毁时，可以在 beforeDestroy 或 destroyed 钩子函数中进行资源清理工作，如移除事件监听器、定时器等。

5. 请解释 Vue 生命周期中 beforeUpdate 和 updated 钩子函数的区别。

答：beforeUpdate 钩子函数在数据更新时调用，发生在虚拟 DOM 打补丁之前。而 updated 钩子函数则是在由于数据更改导致的虚拟 DOM 重新渲染和打补丁之后调用。在 beforeUpdate 中，你可以访问现有的 DOM，而在 updated 中，你可以执行依赖于 DOM 的操作。

七、总结与展望

本文深入解析了 Vue 生命周期的概念、使用方法、包含的属性或方法 API、扩展与高级技巧以及优点与缺点。通过掌握 Vue 生命周期，你可以更好地控制组件的行为和性能，编写更清晰、更易于维护和调试的代码。未来，随着 Vue 的不断发展和完善，我们可以期待更多关于生命周期的新特性和最佳实践的出现。

八、完整使用示例

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="updateMessage">Update Message</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue!'
    };
  },
  beforeCreate() {
    console.log('beforeCreate hook called');
  },
  created() {
    console.log('created hook called');
    // 可以在这里进行数据的初始化操作
  },
  beforeMount() {
    console.log('beforeMount hook called');
  },
  mounted() {
    console.log('mounted hook called');
    // 可以在这里进行 DOM 操作
  },
  beforeUpdate() {
    console.log('beforeUpdate hook called');
    // 在这里可以访问现有的 DOM
  },
  updated() {
    console.log('updated hook called');
    // 在这里可以执行依赖于 DOM 的操作
  },
  beforeDestroy() {
    console.log('beforeDestroy hook called');
    // 在这里进行资源清理工作
  },
  destroyed() {
    console.log('destroyed hook called');
    // 组件已销毁
  },
  methods: {
    updateMessage() {
      this.message = 'Message updated!';
    }
  }
};
</script>

看到这里的小伙伴，欢迎点赞、评论，收藏！

如有前端相关疑问，博主会在第一时间解答，也同样欢迎添加博主好友，共同进步！！！