异常教程

vue3 mounted（长文讲解）

更新时间:

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

  • 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
  • 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

在前端开发领域，Vue.js 作为一款广受欢迎的渐进式框架，其 Vue3 版本凭借 Composition API 等新特性，进一步优化了开发体验。对于许多开发者而言，理解 Vue 的生命周期钩子是掌握框架核心逻辑的关键。本文将聚焦于 Vue3 mounted 这一关键钩子，通过深入浅出的讲解、形象的比喻和实际案例，帮助读者系统掌握其原理与应用。无论你是编程新手还是中级开发者，都能从中获得实用的知识与启发。

一、Vue3 生命周期概述

1.1 生命周期的定义与作用

Vue 的生命周期是指组件从创建到销毁的完整过程，包含多个关键阶段。每个阶段对应一个生命周期钩子（如 created、mounted、updated 等），开发者可通过这些钩子在特定时机执行自定义逻辑。
形象比喻：
可以将 Vue 组件的生命周期比作电影拍摄的流程：

  • 创建（created）：剧本撰写完成，演员就位，但尚未开拍。
  • 挂载（mounted）：摄像机启动，场景搭建完成，演员开始表演。
  • 更新（updated）：根据导演要求调整镜头或台词。
  • 销毁（beforeUnmount/unmounted）：拍摄结束，场地拆卸，演员离场。

1.2 mounted 的位置与特性

mounted 是 Vue3 生命周期中的重要钩子，其触发时机在组件挂载到 DOM 后。此时，组件的虚拟 DOM（Virtual DOM）已转换为真实 DOM，并渲染到页面上。
核心特点：

  • 唯一可操作真实 DOM 的阶段：在 mounted 钩子中，开发者可以直接访问和操作 DOM 元素，例如初始化第三方库（如图表库、地图库）。
  • 数据与 DOM 同步：组件的数据（如 ref 或 reactive 定义的响应式数据）已更新到视图中，因此可以直接读取或修改 DOM。

二、深入理解 mounted 的执行时机

2.1 mounted 与其他钩子的对比

通过对比 created 和 mounted，可以更清晰地理解两者的差异：

钩子名称触发时机特点与适用场景
created组件实例创建完成后，数据观测初始化完成可操作数据，但无法操作 DOM
mounted组件首次渲染到 DOM 后可操作 DOM，适合初始化 DOM 相关逻辑

关键区别：

  • created 阶段，DOM 尚未生成，因此无法直接操作元素。
  • mounted 阶段，DOM 已渲染，可以安全地访问和操作元素。

2.2 mounted 的典型应用场景

以下场景建议在 mounted 中执行逻辑：

  1. DOM 初始化操作：例如，为第三方库（如 D3.js）绑定事件或初始化配置。
  2. 数据请求与异步操作：从 API 获取数据后更新视图。
  3. 页面尺寸检测：获取元素高度或宽度以调整布局。

示例代码 1：

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

const count = ref(0);

onMounted(() => {
  // 直接操作 DOM 元素
  const domElement = document.getElementById('my-element');
  domElement.style.color = 'red';

  // 发送 HTTP 请求
  fetch('/api/data')
    .then(response => response.json())
    .then(data => {
      count.value = data.count;
    });
});
</script>

<template>
  <div id="my-element">当前计数：{{ count }}</div>
</template>

三、实践案例：mounted 的常见用法

3.1 案例 1：初始化第三方库

假设需要在页面中集成一个地图库（如 Leaflet），需在 mounted 中初始化地图：

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

onMounted(() => {
  // 创建地图实例
  const map = L.map('map-container').setView([51.505, -0.09], 13);
  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '© OpenStreetMap contributors'
  }).addTo(map);
});
</script>

<template>
  <div id="map-container" style="width: 100%; height: 400px;"></div>
</template>

关键点：

  • 在 mounted 钩子中访问 #map-container 的真实 DOM 元素。
  • 确保地图库的依赖已正确引入。

3.2 案例 2：动态计算元素尺寸

假设需要根据窗口尺寸动态调整组件布局：

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

onMounted(() => {
  const container = document.querySelector('.dynamic-container');
  const width = container.offsetWidth;
  const height = container.offsetHeight;
  // 根据尺寸执行后续逻辑
});
</script>

<template>
  <div class="dynamic-container" style="width: 100%; height: 300px;">
    <!-- 内容区域 -->
  </div>
</template>

注意事项：

  • 若需响应窗口大小变化，应结合 window.addEventListener('resize', ...)，但首次计算应在 mounted 中完成。

四、避免常见陷阱与最佳实践

4.1 不要在 mounted 中直接操作未渲染的元素

如果在 mounted 钩子中引用一个未被渲染的 DOM 元素（例如，因条件渲染未显示的元素），可能导致 null 引用错误。

错误示例：

// 假设 v-if 控制元素显示，初始值为 false
onMounted(() => {
  const element = document.getElementById('conditional-element'); // 可能为 null
  element.style.display = 'block'; // 报错
});

解决方案：
确保元素在 mounted 时已渲染，或使用响应式数据动态控制显示状态。

4.2 避免在 mounted 中执行复杂计算

mounted 钩子通常在组件首次渲染后立即执行，若在此阶段执行耗时操作（如大数据量计算或循环），可能导致页面卡顿。建议将复杂逻辑拆分到独立函数或异步任务中。

4.3 使用 Composition API 的 onMounted

在 Vue3 中，推荐使用 Composition API 的 onMounted 替代选项式 API 的 mounted。例如：

// 选项式 API（Vue2/Vue3 兼容）
export default {
  mounted() {
    // 逻辑代码
  }
};

// Composition API（Vue3 推荐）
import { onMounted } from 'vue';

onMounted(() => {
  // 逻辑代码
});

五、进阶技巧：结合 async/await 在 mounted 中处理异步

若需在 mounted 中执行异步操作（如 API 请求），可结合 async/await 提升代码可读性：

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

const data = ref(null);

onMounted(async () => {
  try {
    const response = await fetch('/api/data');
    data.value = await response.json();
  } catch (error) {
    console.error('数据获取失败:', error);
  }
});
</script>

优势：

  • 代码结构清晰，避免“回调地狱”。
  • 可直接通过 data.value 更新组件状态。

六、总结与展望

通过本文的讲解，读者应已掌握以下核心内容：

  1. Vue3 生命周期的阶段划分与 mounted 的关键作用：作为唯一可操作真实 DOM 的钩子，mounted 是初始化第三方库、执行数据请求的重要入口。
  2. 实际案例与代码示例：通过地图集成、尺寸检测等场景，理解如何将理论转化为实践。
  3. 常见问题与最佳实践：避免因 DOM 未渲染、性能问题导致的错误，提升代码健壮性。

未来，随着 Vue3 的持续演进，开发者可进一步探索 mounted 与其他钩子（如 beforeUnmount）的配合，实现更复杂的交互逻辑。希望本文能成为你掌握 Vue3 mounted 的起点，并在实际项目中灵活运用这一核心工具。

最新发布

查看更多文章