VUE的生命周期

在Vue.js中，生命周期指的是组件从创建到销毁过程中，各个阶段的钩子函数（hooks）。这些钩子函数允许你在组件的不同阶段执行代码，例如组件的创建、挂载、更新、销毁等。Vue提供了多个生命周期钩子，使得开发者能够在组件的生命周期的各个阶段插入自定义逻辑。

以下是Vue 2.x中常见的生命周期钩子：

创建阶段：

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

created：在实例创建完成后被立即调用，此时已完成数据观测、属性和方法的运算，watch/event 事件回调还未绑定。

挂载阶段：

beforeMount：在挂载开始之前被调用，相关的render函数首次被调用。该钩子在生成真实的DOM之前被调用。

mounted：el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。此时，组件的模板已真实地被渲染成HTML，并且挂载到了DOM上。

更新阶段：

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

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

销毁阶段：

beforeDestroy：在实例销毁之前调用。在这一步，实例仍然完全可用，this 仍能获取到组件实例。

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

在Vue 3.x中，除了上述的生命周期钩子外，还引入了Composition API，这使得生命周期钩子的使用方式略有不同：

创建阶段：使用setup()函数代替了beforeCreate和created钩子，因为setup()是组件创建时最先调用的。

挂载和更新：挂载和更新的生命周期钩子名称保持不变（如mounted, updated等），但它们现在是在setup()函数内部通过调用Vue的响应式API和生命周期函数来访问的。例如，使用onMounted()来替代mounted钩子。

销毁阶段：使用onBeforeUnmount和onUnmounted来替代beforeDestroy和destroyed。

例如，在Vue 3中，你可以这样使用生命周期钩子：

import { onMounted, onUnmounted } from 'vue';
 
export default {
  setup() {
    onMounted(() => {
      console.log('组件已挂载');
    });
 
    onUnmounted(() => {
      console.log('组件即将销毁');
    });
  }
}