引言
在 Vue 3 中，onMounted 是一个生命周期钩子，用于在组件实例被挂载到 DOM 上后执行代码。它是组合式 API 的一部分，使得我们在组件中可以更灵活地管理生命周期。本文将详细介绍 onMounted 的用法、特性以及常见场景。
什么是生命周期钩子？
在 Vue 中，生命周期钩子是组件在其生命周期的不同阶段调用的特殊方法。Vue 3 提供了一组生命周期钩子，帮助我们在组件创建、更新和销毁时执行特定的代码。onMounted 是其中之一。
onMounted 的基本用法
引入
要使用 onMounted，需要从 vue 包中导入它：
import { onMounted } from 'vue';示例
下面是一个简单的示例，展示如何使用 onMounted：
<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('组件已挂载到 DOM'); // 可以在这里进行数据获取或其他操作 }); return { message, }; },};</script>在这个示例中，当组件挂载到 DOM 后，控制台将输出一条消息。
onMounted 的特性
只调用一次：onMounted 只会在组件第一次挂载时调用。如果组件的状态发生变化而未被卸载，它不会再次调用。
异步操作：onMounted 可以用于进行异步操作，例如数据请求。在挂载后执行这些操作，可以确保组件的 DOM 已经准备好。
与其他生命周期钩子结合使用：onMounted 通常与其他生命周期钩子（如 onBeforeMount 和 onUnmounted）一起使用，以实现更复杂的组件逻辑。
常见用法
1. 数据获取
通常在组件挂载后，我们需要获取数据并渲染。可以在 onMounted 中调用 API：
onMounted(async () => { const response = await fetch('https://api.example.com/data'); const data = await response.json(); // 更新数据状态});2. DOM 操作
onMounted 也可以用于直接操作 DOM。例如，初始化图表或使用第三方库：
import { onMounted } from 'vue';onMounted(() => { const chart = new Chart(document.getElementById('myChart'), { // chart configuration });});3. 事件监听
在组件挂载后添加事件监听器，并在卸载时清除它们：
onMounted(() => { window.addEventListener('resize', handleResize);});onUnmounted(() => { window.removeEventListener('resize', handleResize);});注意事项
组件销毁：确保在 onUnmounted 中清理可能导致内存泄漏的操作，例如事件监听器和定时器。
响应式数据：如果在 onMounted 中修改响应式数据，确保使用 Vue 提供的响应式 API（如 ref 和 reactive），以保持数据的响应性。
使用场景：onMounted 不适合用于初始化组件的基本状态（如 props），它更适合执行需要依赖于 DOM 或外部数据的操作。