Vue3生命周期_ 字节宝

Vue 3 生命周期

Vue 3 的生命周期函数是在组件创建、更新和销毁的不同阶段执行的一系列钩子函数。这些生命周期函数提供了在组件不同阶段执行自定义逻辑的机会。

组件生命周期钩子函数

Vue 3 的组件生命周期钩子函数可以分为三个主要阶段：创建阶段、更新阶段和销毁阶段。下面是每个阶段的生命周期钩子函数：

创建阶段

beforeCreate：在实例创建之前调用。此时组件实例的响应式数据和事件还未初始化。
created：在实例创建完成后调用。此时组件实例的响应式数据已经初始化，可以访问和操作数据。
beforeMount：在组件挂载之前调用。此时组件的模板已经编译完成，但尚未挂载到 DOM 上。
mounted：在组件挂载完成后调用。此时组件已经被挂载到 DOM 上，可以进行 DOM 操作和访问 DOM 元素。

更新阶段

beforeUpdate：在组件更新之前调用。当组件的响应式数据发生改变时，会触发更新。
updated：在组件更新完成后调用。此时组件的 DOM 已经更新，可以进行一些更新后的操作。

销毁阶段

beforeUnmount：在组件卸载之前调用。此时组件仍然可以访问和操作数据。
unmounted：在组件卸载完成后调用。此时组件已经从 DOM 中移除，不再可用。

示例

下面是一个简单的示例，演示了 Vue 3 生命周期的使用：

代码语言：javascript复制

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="updateMessage">Update Message</button>
    <button @click="destroyComponent">Destroy Component</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue 3!'
    };
  },
  beforeCreate() {
    console.log('beforeCreate');
  },
  created() {
    console.log('created');
  },
  beforeMount() {
    console.log('beforeMount');
  },
  mounted() {
    console.log('mounted');
  },
  beforeUpdate() {
    console.log('beforeUpdate');
  },
  updated() {
    console.log('updated');
  },
  beforeUnmount() {
    console.log('beforeUnmount');
  },
  unmounted() {
    console.log('unmounted');
  },
  methods: {
    updateMessage() {
      this.message = 'Updated message';
    },
    destroyComponent() {
      this.$destroy();
    }
  }
};
</script>

在上面的示例中，我们定义了一个简单的组件，包含了各个生命周期钩子函数。当组件被创建、更新和销毁时，相应的钩子函数会被调用，并打印相应的信息到控制台。我们还定义了两个按钮，用于更新组件的数据和销毁组件。

0 人点赞