vue中生命钩子函数的使用

在Vue中，钩子函数（也称为生命周期钩子）允许你在组件的不同阶段添加自己的代码。这些阶段包括组件的创建、挂载、更新、销毁等。通过在这些钩子函数中编写代码，你可以控制组件的行为，执行数据获取、事件监听、DOM操作等任务。

Vue 2.x 和 Vue 3.x 在生命周期钩子方面有所不同，但基本概念是相似的。下面分别介绍在Vue 2.x和Vue 3.x中如何使用钩子函数。

Vue 2.x 中的钩子函数

Vue 2.x 中的常用生命周期钩子包括：

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

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

beforeMount：在挂载开始之前被调用：相关的 render 函数首次被调用。该钩子在服务器端渲染期间不被调用。

mounted：el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内。

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

updated：由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用这个钩子。当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。但是要避免更改状态，因为这可能会导致无限循环的更新。

beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。

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

在Vue组件中使用这些钩子函数，你只需要在组件的export default对象中定义它们即可，如下所示：

export default {
  data() {
    return {
      // 数据
    };
  },
  created() {
    // 组件创建完成后执行的代码
  },
  mounted() {
    // 组件挂载到DOM后执行的代码
  },
  // 其他钩子...
}

Vue 3.x 中的钩子函数

Vue 3.x 引入了Composition API，这提供了另一种编写组件的方式，但Options API（上面介绍的方式）仍然被支持。不过，在使用Composition API时，生命周期钩子函数的使用方式会有所不同。你需要从vue中导入它们，并在setup函数中使用：

import { onMounted, onUpdated, onUnmounted } from 'vue';

export default {
  setup() {
    onMounted(() => {
      // 组件挂载到DOM后执行的代码
    });

    onUpdated(() => {
      // 组件更新后执行的代码
    });

    onUnmounted(() => {
      // 组件销毁后执行的代码
    });

    // 其他Composition API逻辑...
  }
}

注意，Vue 3.x 中没有直接对应于Vue 2.x中的beforeCreate和created的Composition API钩子，因为setup函数是在beforeCreate和created之间被调用的。同样，beforeDestroy和destroyed在Composition API中对应的是onUnmounted。