对线面试官☞Vue的生命周期有哪些及每个生命周期做了什么？

Vue.js 的生命周期是指 Vue 实例从创建到销毁的整个过程，分为几个阶段：创建、挂载、更新和销毁。以下是 Vue 2.x 和 Vue 3.x 中的生命周期钩子及其作用：

Vue 2.x 生命周期钩子：

1. beforeCreate：

   • 在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
   • 此时组件实例已被创建，但是还没有开始挂载，data 和 methods 还未被处理。

2. created：

   • 实例已经创建完成，data 和 methods 已经设置好，但是还没有挂载到 DOM 上。
   • 可以进行数据的初始化操作，也可以进行 Ajax 调用。

3. beforeMount：

   • 在挂载开始之前被调用，相关的 render 函数首次被调用。
   • 此时 $el 属性还未显示出来，虚拟DOM 也未生成。

4. mounted：

   • 实例已经挂载到 DOM 上，可以访问到 $el 属性。
   • 此时可以进行 DOM 操作或者执行依赖于 DOM 的操作。

5. beforeUpdate：

   • 在数据变化之后，DOM 重新渲染之前被调用。
   • 可以在这个钩子中进一步地更改状态，这不会触发额外的重渲染。

6. updated：

   • 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
   • 可以执行依赖于 DOM 的操作。

7. beforeDestroy：

   • 实例销毁之前调用，此时实例仍然完全可用。
   • 可以进行数据清理，例如取消监听器、定时器等。

8. destroyed：

   • 实例销毁后调用，调用后，Vue 实例指示的 DOM 将不会被保留，所有的指令绑定将会被移除，所有事件监听器将会被移除，子实例也会被销毁。

9. errorCaptured（Vue 2.5.0+）：

   • 当捕获一个来自子孙组件的错误时被调用。

Vue 3.x 生命周期钩子：

Vue 3.x 中的生命周期钩子与 Vue 2.x 相比，有一些变化，主要是为了更好地与 async components 和 time-sliced rendering 特性配合：

1. setup：

   • Vue 3 引入了 Composition API，其中的 setup 函数是一个新的生命周期钩子。
   • 在 setup 函数中，可以访问到 props、context 对象，并且可以返回一个响应式的状态或者函数，这些状态和函数可以在模板中被使用。
   • setup 函数在 beforeCreate 和 created 钩子之前执行。

2. onBeforeMount：

   • 与 Vue 2.x 中的 beforeMount 类似，但在 Vue 3.x 中，它与 setup 函数一起使用。

3. onMounted：

   • 与 Vue 2.x 中的 mounted 类似，但在 Vue 3.x 中，它与 setup 函数一起使用。

4. onBeforeUpdate：

   • 与 Vue 2.x 中的 beforeUpdate 类似。

5. onUpdated：

   • 与 Vue 2.x 中的 updated 类似。

6. onBeforeUnmount：

   • 与 Vue 2.x 中的 beforeDestroy 类似。

7. onUnmounted：

   • 与 Vue 2.x 中的 destroyed 类似。

8. onRenderTracked 和 onRenderTriggered：

   • Vue 3.x 新增的调试生命周期钩子，用于跟踪依赖项和触发重渲染。

9. onErrorCaptured：

   • 与 Vue 2.x 中的 errorCaptured 类似。

在 Vue 3.x 中，官方推荐使用 Composition API 的生命周期钩子，因为它们与 setup 函数的集成更好，并且提供了更灵活的代码组织方式。