学习Vue 3.0中的onMounted和onUnmounted钩子函数

在Vue 3.0中，Composition API的引入使得组件的逻辑组织和管理变得更加灵活和清晰。onMounted和onUnmounted是Vue 3.0中两个非常重要的生命周期钩子，它们可以帮助开发者在组件的生命周期内进行相关的操作，下面我们将详细探讨这两个钩子函数的用法，并通过代码示例来加深理解。

1. onMounted

onMounted钩子函数在组件实例被挂载完成后调用。这意味着在这个钩子中，可以安全地访问DOM元素，并进行一些需要在页面上展示后才能执行的初始化工作，比如数据请求、事件监听等。

示例代码：

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

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

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

    onMounted(() => {
      console.log('组件已挂载，开始进行初始化操作');
      // 模拟一个数据请求
      setTimeout(() => {
        message.value = '数据已加载!';
      }, 2000);
    });

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

在这个示例中，message是一个响应式变量，我们在onMounted钩子内模拟了一个异步数据请求。组件挂载后会输出一条日志，并在2秒后更新message的值。这样，用户在页面上就能看到“数据已加载！”的提示。

2. onUnmounted

onUnmounted钩子函数是在组件实例被销毁前调用，非常适合用来清理一些资源，比如取消网络请求、移除事件监听器等。通过适当的资源清理，可以有效防止内存泄漏。

示例代码：

<template>
  <div>
    <h2>{{ title }}</h2>
    <button @click="toggle">切换状态</button>
    <div v-if="isVisible">这是一个可见的元素。</div>
  </div>
</template>

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

export default {
  setup() {
    const title = ref('Vue 3 的 onUnmounted 示例');
    const isVisible = ref(false);
    const handleResize = () => {
      console.log('窗口尺寸改变:', window.innerWidth, window.innerHeight);
    };

    const toggle = () => {
      isVisible.value = !isVisible.value;
    };

    onMounted(() => {
      window.addEventListener('resize', handleResize);
    });

    onUnmounted(() => {
      window.removeEventListener('resize', handleResize);
      console.log('组件已卸载，清理事件监听器');
    });

    return {
      title,
      isVisible,
      toggle,
    };
  },
};
</script>

在这个示例中，handleResize函数用于处理窗口尺寸变化的事件。当组件挂载时，我们通过window.addEventListener来添加事件监听。当组件卸载时，onUnmounted在其中清除了事件监听器，保证了不会在组件卸载后依旧触发该事件，避免了潜在的内存泄漏。

总结

onMounted和onUnmounted是Vue 3.0中Composition API的重要组成部分，它们使得我们可以在组件的不同生命周期阶段做出相应的处理。适当地使用这些钩子，不仅能提高代码的清晰度和可维护性，也能有效管理资源，避免内存泄漏的问题。

通过示例代码的演示，希望你对这两个生命周期钩子的用法有了更深入的理解。在实际开发中，我们可以根据具体需求来合理使用这些钩子，使我们的Vue组件更加高效和健壮。