Vue2 生命周期使用场景及在 Vue3 中的变化

目录

Vue2 生命周期使用场景及在 Vue3 中的变化

一、Vue2 中常用生命周期及使用场景

1. created

2. mounted

3. updated

4. destroyed

二、Vue3 中的变化

1. setup()

2. onMounted()

3. onUpdated()

4. onUnmounted()

三、代码示例

---

在 Vue 开发中，生命周期是非常重要的概念，它允许我们在不同的阶段执行特定的代码。下面将结合视频内容，介绍 Vue2 中常用的生命周期及其使用场景，并探讨在 Vue3 中的变化，同时给出相应的代码示例。

一、Vue2 中常用生命周期及使用场景

1. created

• 一般用于初始化数据，在这个阶段，实例已经创建完成，但是 DOM 还没有挂载。可以进行一些数据的初始化操作，例如请求数据等。

2. mounted

• 通常用于在 DOM 挂载后执行一些操作，比如获取 DOM 元素、发送请求等。如果是单一组件且在非异步同步情况下想要获取 DOM，会在 mounted 中进行操作。
• 当父组件引入子组件，且子组件请求要大于父组件先加载出来时，可以在父组件的 mounted 生命周期中写请求数据的代码。

3. updated

• 主要在数据更新时使用，可以在这个阶段对更新后的数据进行一些处理。

4. destroyed

• 一般用于做一些业务上的收起 UI 组件或性能方面的操作。例如在视频播放场景中，当用户关闭页面或切换路由时，可以在 destroyed 生命周期中记录视频播放的时间，以便下次初始化时从上次的播放位置继续播放。

二、Vue3 中的变化

在 Vue3 中，生命周期函数的名称发生了一些变化，但基本的功能和使用场景仍然相似。

1. setup()

• 在 Vue3 中，setup 函数是一个新的入口点，它在组件创建之前被调用。可以在 setup 函数中进行数据的初始化、响应式数据的定义等操作。

2. onMounted()

• 对应 Vue2 中的 mounted 生命周期，在组件挂载后执行。

3. onUpdated()

• 对应 Vue2 中的 updated 生命周期，在数据更新后执行。

4. onUnmounted()

• 对应 Vue2 中的 destroyed 生命周期，在组件卸载前执行。

三、代码示例

以下是一个使用 Vue3 的示例代码，展示了生命周期函数的使用：

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

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

export default {
  setup() {
    const message = ref('Hello, Vue3!');

    // 在组件挂载后执行
    onMounted(() => {
      console.log('Component mounted.');
      // 可以在这里进行 DOM 操作或发送请求
    });

    // 在组件卸载前执行
    onUnmounted(() => {
      console.log('Component unmounted.');
      // 可以在这里进行一些清理操作
    });

    return {
      message,
    };
  },
};
</script>

通过以上内容，我们了解了 Vue2 中常用生命周期的使用场景以及在 Vue3 中的变化，并通过代码示例进行了展示。在实际开发中，根据具体的业务需求合理选择和使用生命周期函数，可以提高开发效率和代码质量。