在vue3中生命周期有哪些，与在vue2中有什么区别，如何使用才合理高效

本文链接：https://blog.youkuaiyun.com/misstianyun/article/details/143729387

😉 你好呀，我是爱编程的Sherry，很高兴在这里遇见你！我是一名拥有十多年开发经验的前端工程师。这一路走来，面对困难时也曾感到迷茫，凭借不懈的努力和坚持，重新找到了前进的方向。我的人生格言是——认准方向，坚持不懈，你终将迎来辉煌！欢迎关注我😁，我将在这里分享工作中积累的经验和心得，希望我的分享能够给你带来帮助。

Vue 3 对比 Vue 2 在项目生命周期方面做了一些重要的改进和调整。理解这些变化对于迁移到 Vue 3 或者从头开始使用 Vue 3 非常有帮助。以下是 Vue 3 和 Vue 2 的生命周期钩子的主要区别以及如何使用它们。

Vue 2 的生命周期钩子

在 Vue 2 中，组件的生命周期包括以下几个主要阶段：

在这里插入图片描述

1. 创建阶段：

beforeCreate: 实例初始化之前调用，数据观测和事件尚未生效。在此阶段，实例刚刚被创建，还未初始化数据（如 data、methods、computed、watch）等。
created: 实例创建后调用，数据观测和事件已完成。在此阶段，Vue 实例已经完成了初始化，但是还没有开始挂载过程。这意味着在这个阶段 DOM 还没有生成，因此不能访问或操作 DOM 元素。

2. 挂载阶段：

beforeMount: 模板编译、虚拟 DOM 生成前调用。此阶段是挂载之前的阶段，可以用于做一些挂载前的准备工作。
mounted: DOM 挂载后调用，常用于获取 DOM 元素。此阶段表示组件已经被挂载到 DOM 中，并且所有数据绑定也已经完成。可以在这个阶段开始获取和操作 DOM 节点。

3. 更新阶段：

beforeUpdate: 数据更新触发重新渲染前调用。如果需要在渲染之前访问 DOM，可以在此钩子中执行。
updated: 视图更新完成后调用。此阶段在数据改变后 DOM 被更新之后调用。注意，由于异步更新队列的存在，updated 钩子可能不会立即执行。

4. 销毁阶段：

beforeDestroy: 实例销毁前调用，常用于清理定时器或事件监听，此时仍然可以访问实例的所有属性。
destroyed: 实例销毁后调用，所有绑定事件移除，子组件也销毁。此时 Vue 实例将不再存在，所有绑定事件和监听器都会被移除。

Vue 3 的生命周期钩子

在这里插入图片描述

Vue 3 在生命周期钩子方面做了以下几项重要改进：

命名变化：

beforeDestroy 改为 beforeUnmount
destroyed 改为 unmounted

如何使用

Option API（选项式）

如果你更喜欢使用传统的 Options API，Vue 3 仍然支持这种方式。你可以像在 Vue 2 中那样定义生命周期钩子：

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');
  }
};

Composition API（组合式）

使用 Composition API 可以更加灵活地组织代码，特别是在处理复杂逻辑时：

import { ref, onMounted, onBeforeUnmount } from 'vue';

export default {
  setup() {
    const message = ref('Hello Vue 3!');

    onMounted(() => {
      console.log('Component is mounted');
    });

    onBeforeUnmount(() => {
      console.log('Component is about to be unmounted');
    });

    // 返回模板中需要使用的变量和函数
    return {
      message
    };
  }
};

使用<script setup>

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';

// 定义一个响应式变量
const message = ref('Hello Vue 3 with <script setup>');

// 组件挂载时的钩子
onMounted(() => {
  console.log('Component is mounted');
  // 可以在这里执行一些初始化操作
});

// 组件卸载前的钩子
onBeforeUnmount(() => {
  console.log('Component is about to be unmounted');
  // 可以在这里执行一些清理操作
});

// 其他生命周期钩子
onBeforeMount(() => {
  console.log('Component is about to be mounted');
});

onUpdated(() => {
  console.log('Component is updated');
});

onBeforeUpdate(() => {
  console.log('Component is about to be updated');
});

onUnmounted(() => {
  console.log('Component is unmounted');
});
</script>

使用时的其他注意事项：

如果有多个组件共享相同的业务逻辑，考虑使用 Mixins 或者 Vuex 来管理状态，而不是将逻辑分散到各个组件的生命周期钩子中。
尽量避免在 mounted 阶段做复杂的异步请求，因为这可能会使组件变得难以测试。如果需要这样做，考虑使用 Vue 生命周期之外的方式处理，比如使用 Vuex 或者 Vuex 的模块来管理状态。
使用 Vue 的 watch 特性来响应数据的变化，可以在 watch 对象中定义需要监听的属性，并指定当属性值发生变化时需要执行的函数。

数据请求在created和mounted的区别

`created` 钩子

特点：在 created 阶段，Vue 实例已经被创建，但是DOM 还未被挂载。也就是说，这个阶段的数据模型、方法、计算属性等都已经被初始化，但它们还未被渲染到页面上。
适用场景：如果你需要在组件初始化时就请求数据，并且这些数据不需要依赖于 DOM 的渲染结果，那么可以选择在 created 钩子中发起请求。例如，你需要从服务器获取用户信息来设置组件的初始状态。
注意：由于此时 DOM 尚未生成，所以任何依赖于 DOM 操作的逻辑都不应该在这个阶段执行。

`mounted` 钩子

特点：在 mounted 阶段，Vue 实例已经被挂载到了 DOM 中，所有模板替换完成，$el 属性也被填充完毕。此时可以访问真实的 DOM 元素。
适用场景：如果你的数据请求需要根据 DOM的某些信息（例如尺寸、位置等），或者你需要在页面加载完成后立即执行一些与 DOM 相关的操作（如第三方插件的初始化），那么最好在 mounted 钩子中发起请求。
注意：尽管可以在这个阶段访问 DOM，但如果请求的数据会影响到 DOM 的渲染结果，确保在数据返回并更新视图后，DOM 的相关操作能够正确执行。