异常教程

onmounted vue3（保姆级教程）

更新时间:

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

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 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 3 作为 Vue.js 的重大升级版本，凭借其 Composition API、响应式系统优化等特性，已成为开发者构建高效应用的重要工具。而 onMounted 钩子函数，作为 Vue 3 生命周期管理的核心组成部分，能够帮助开发者在组件挂载后执行特定逻辑。本文将深入解析 onMounted 的工作原理、应用场景，并通过实例代码与类比说明，帮助读者快速掌握这一重要知识点。

Vue 3 生命周期简介

Vue 的生命周期是指组件从创建到销毁过程中经历的一系列状态变化阶段。每个阶段对应一个钩子函数（Hook），开发者可通过这些钩子函数在特定时机执行代码。Vue 3 通过 Composition API 的 onXXX 系列函数（如 onMounted、onUnmounted）重新组织了生命周期钩子，使其更符合函数式编程的思维模式。

以人生阶段做类比，可以这样理解 Vue 3 的生命周期：

  • 出生（创建组件）：组件实例被创建时触发 onBeforeMount 和 onMounted
  • 成长（更新）：数据变化时触发 onUpdated
  • 消亡（销毁）：组件卸载时触发 onUnmounted

onMounted 正好对应“出生”后的第一个关键阶段——组件挂载到 DOM 后，开发者可以在此时安全地操作 DOM 元素或发起网络请求。

onMounted 的核心作用与使用场景

1. 钩子函数的定义与触发时机

onMounted 是 Vue 3 Composition API 提供的生命周期钩子，用于在组件挂载后执行代码。其触发条件是：

  • 组件首次渲染完成
  • 组件的虚拟 DOM（VNode）已插入真实 DOM

此时，DOM 元素已存在，开发者可安全地访问或操作这些元素，例如：

import { onMounted } from 'vue';  

export default {  
  setup() {  
    onMounted(() => {  
      // 此处可以安全操作 DOM  
      const element = document.getElementById('my-element');  
      console.log(element); // 不会返回 null  
    });  
    return {};  
  }  
};

2. 典型应用场景

onMounted 的常见用途包括：

  • 初始化第三方库：如图表库（Chart.js）、富文本编辑器（TinyMCE）等需要挂载到具体 DOM 元素上的库，需在组件挂载后初始化。
  • DOM 操作：如动态调整元素尺寸、添加事件监听器。
  • 数据加载：从 API 获取数据并更新组件状态。

示例：使用 onMounted 加载数据

import { onMounted, ref } from 'vue';  

export default {  
  setup() {  
    const products = ref([]);  

    onMounted(async () => {  
      const response = await fetch('/api/products');  
      products.value = await response.json();  
    });  

    return { products };  
  }  
};

onMounted 与 Vue 2 的对比

Vue 2 中，开发者通过 mounted 选项实现类似功能，但 Vue 3 的 onMounted 具备以下优势：
| 对比维度 | Vue 2 的 mounted | Vue 3 的 onMounted |
|----------------|-------------------|----------------------|
| 语法风格 | 选项式 API | Composition API |
| 代码复用性 | 需通过 Mixins | 通过函数组合 |
| 可读性 | 分散在不同选项中 | 集中在 setup() 函数 |

通过以下代码片段对比，可见 Vue 3 的代码结构更清晰：

Vue 2 代码示例：

new Vue({  
  mounted() {  
    // 操作 DOM 或发起请求  
  },  
  // 其他选项...  
});

Vue 3 代码示例：

import { onMounted } from 'vue';  

export default {  
  setup() {  
    onMounted(() => {  
      // 集中管理生命周期逻辑  
    });  
    return {};  
  }  
};

实战案例：结合 onMounted 实现动态元素加载

案例目标

创建一个组件，当用户滚动到页面底部时，动态加载更多数据。

实现步骤

  1. 监听滚动事件：在 onMounted 中添加滚动事件监听器。
  2. 检测滚动位置：判断用户是否滚动到页面底部。
  3. 加载新数据：触发时调用 API 获取新数据并更新状态。

代码实现

import { onMounted, ref } from 'vue';  

export default {  
  setup() {  
    const items = ref([]);  
    let page = 1;  

    const loadMoreData = async () => {  
      const response = await fetch(`/api/items?page=${page}`);  
      const newItems = await response.json();  
      items.value = [...items.value, ...newItems];  
      page += 1;  
    };  

    const handleScroll = () => {  
      const { scrollTop, clientHeight, scrollHeight } = document.documentElement;  
      if (scrollTop + clientHeight >= scrollHeight - 20) {  
        loadMoreData();  
      }  
    };  

    onMounted(() => {  
      loadMoreData(); // 初始加载  
      window.addEventListener('scroll', handleScroll);  
    });  

    onUnmounted(() => {  
      window.removeEventListener('scroll', handleScroll);  
    });  

    return { items };  
  }  
};

关键点解析

  • 事件监听与移除：在 onMounted 中添加事件监听，在 onUnmounted 中移除，避免内存泄漏。
  • 防抖优化：实际应用中可结合防抖（Debounce）优化滚动事件性能。

常见问题与最佳实践

1. 为什么在 onMounted 外部操作 DOM 会失败？

如果在 onMounted 之前尝试访问 DOM 元素，可能因组件未挂载而返回 null。例如：

// 错误示例  
const element = document.getElementById('my-element'); // 可能为 null  
onMounted(() => {  
  // ...  
});

解决方案：将所有 DOM 操作移至 onMounted 内部。

2. 如何处理多个 onMounted 钩子的依赖关系？

当多个 onMounted 钩子需按顺序执行时，可通过函数组合或 Promise 链实现：

import { onMounted } from 'vue';  

onMounted(() => {  
  // 第一步操作  
});  

onMounted(() => {  
  // 第二步操作，依赖第一步的结果  
});

但若第二步依赖第一步的结果，建议合并到一个钩子函数中，或使用 Promise：

onMounted(async () => {  
  await firstOperation();  
  secondOperation();  
});

3. 与 nextTick 的配合使用

当需要等待 Vue 更新 DOM 后执行代码时，可结合 nextTick：

import { onMounted, nextTick } from 'vue';  

onMounted(async () => {  
  // 更新数据  
  someData.value = 'new value';  
  await nextTick(); // 等待 DOM 更新  
  console.log(document.getElementById('element').textContent); // 获取更新后的值  
});

结论

onMounted 是 Vue 3 生命周期管理中不可或缺的工具，它帮助开发者在组件挂载后安全地执行关键操作。无论是初始化第三方库、操作 DOM 还是加载数据，onMounted 都能提供清晰且可靠的执行时机。通过本文的代码示例与场景分析，读者应能掌握如何在实际项目中灵活运用这一钩子函数。建议开发者结合 Composition API 的其他钩子（如 onUpdated、onUnmounted），系统性地管理组件的全生命周期，从而构建出高效、稳定的 Vue 应用。

若需进一步探索 Vue 3 的高级用法，可深入研究响应式系统（如 ref、reactive）、自定义指令（Directives）或状态管理方案（Pinia），逐步提升开发技能。

最新发布

查看更多文章