vue3 onMounted 使用方法和注意事项

基础用法 / 语法糖写法

<script>
import { onMounted } from 'vue';// 选项式 API 写法
export default {setup() {onMounted(() => {console.log('组件已挂载');});}
}
</script>

<script setup>
onMounted(() => {console.log('组件已挂载');
});
</script>

‌异步操作async/await

在 onMounted 中执行异步操作（如数据请求），确保组件已完全渲染

onMounted(async () => {const data = await fetch('https://api.example.com/data');console.log(data);
});

常见使用场景

访问 DOM 元素

结合 ref 获取模板中的 DOM 节点或子组件实例：

import { ref, onMounted } from 'vue';const elementRef = ref(null);
onMounted(() => {console.log(elementRef.value); // 输出 DOM 元素
});

初始化数据或事件

执行一次性初始化任务，例如绑定事件监听器：

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

定时器

let timer;
onMounted(() => {timer = setInterval(() => {console.log('定时任务');}, 1000);
});

注意事项

1. ‌仅执行一次‌
   onMounted 仅在组件首次挂载时触发，不会在更新阶段重复调用‌。

2. ‌清理操作‌
   若在 onMounted 中注册了事件监听或定时器，需在 onUnmounted 中清理：

   import { onUnmounted } from 'vue';onMounted(() => {window.addEventListener('resize', handleResize);
   });onUnmounted(() => {window.removeEventListener('resize', handleResize);
   });
   

3. ‌执行顺序‌
   多个 onMounted 按代码顺序依次执行，支持定义多个钩子函数‌。