Vue 中组件的生命周期有哪些阶段？

推荐答案

Vue 组件的生命周期主要分为以下几个阶段：

1. 创建阶段：

   • beforeCreate
   • created

2. 挂载阶段：

   • beforeMount
   • mounted

3. 更新阶段：

   • beforeUpdate
   • updated

4. 销毁阶段：

   • beforeDestroy
   • destroyed

本题详细解读

创建阶段

• beforeCreate：在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。此时，组件的 data 和 methods 还未初始化。

• created：在实例创建完成后被立即调用。在这一阶段，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。

挂载阶段

• beforeMount：在挂载开始之前被调用，相关的 render 函数首次被调用。此时，模板编译已完成，但尚未将生成的 DOM 插入到页面中。

• mounted：在实例挂载到 DOM 后调用。此时，组件已经出现在页面中，可以进行 DOM 操作。通常在这个阶段进行异步请求或操作 DOM 元素。

更新阶段

• beforeUpdate：在数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。可以在该钩子中进一步更改状态，不会触发附加的重渲染过程。

• updated：在由于数据更改导致的虚拟 DOM 重新渲染和打补丁之后调用。当这个钩子被调用时，组件 DOM 已经更新，可以执行依赖于 DOM 的操作。然而在大多数情况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环。

销毁阶段

• beforeDestroy：在实例销毁之前调用。在这一阶段，实例仍然完全可用，通常用于清理工作，如取消定时器、解绑事件监听器等。

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