vue 生命周期

Vue.js 的生命周期是指 Vue 实例从开始创建、初始化数据、编译模板、挂载 DOM、渲染→更新→渲染、卸载等一系列过程。Vue 提供了多个生命周期钩子（也称为生命周期事件或生命周期回调函数），允许我们在 Vue 实例的不同阶段添加自己的代码。这些钩子为我们提供了执行特定任务的机会，如数据观测、DOM 操作、事件监听等。

Vue 2.x 和 Vue 3.x 的生命周期钩子在大部分情况下是相似的，但 Vue 3 引入了一些变化和新的 Composition API，其中也包括了生命周期钩子的使用方式。下面将分别介绍 Vue 2.x 和 Vue 3.x 的生命周期钩子。

Vue 2.x 生命周期钩子

1. beforeCreate：在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。
2. created：实例已经创建完成之后被立即调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。
3. beforeMount：在挂载开始之前被调用：相关的 render 函数首次被调用。该钩子在服务器端渲染期间不被调用。
4. mounted：el 被新创建的 vm.el替换，并挂载到实例上去之后调用该钩子。如果根实例挂载了一个文档内元素，当mounted被调用时vm.el 也在文档内。
5. beforeUpdate：数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。
6. updated：由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用这个钩子。当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。但是要避免更改状态，因为这可能会导致无限循环的更新。
7. beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。
8. destroyed：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

Vue 3.x 生命周期钩子

Vue 3.x 的生命周期钩子与 Vue 2.x 类似，但 Vue 3 引入了 Composition API，这使得在 Composition API 中使用生命周期钩子有所不同。

在 Options API 中，Vue 3 的生命周期钩子与 Vue 2 完全相同。但在 Composition API 中，你需要从 vue 中导入相应的生命周期钩子函数，并在 setup() 函数中使用它们。

import { onMounted, onUpdated, onUnmounted } from 'vue';  
  
export default {  
  setup() {  
    onMounted(() => {  
      console.log('Component is mounted!');  
    });  
  
    onUpdated(() => {  
      console.log('Component is updated!');  
    });  
  
    onUnmounted(() => {  
      console.log('Component is unmounted!');  
    });  
  }  
}