你真的会使用Vue3的onMounted钩子函数吗？Vue3中onMounted的用法详解

目录

一、onMounted的前世今生

1.1、onMounted是什么

1.2、onMounted在vue2中的前身

1.2.1、vue2中的onMounted

1.2.2、Vue2与Vue3的onMounted对比

1.3、vue3中onMounted的用法

1.3.1、基础用法

1.3.2、顺序执行异步操作

1.3.3、并行执行多个异步操作

1.3.4、执行一次性副作用

1.3.5、清理工作（较少用）

1.3.6、组合使用（特定情况用）

1.3.7、直接将封装好的函数传递给onMounted钩子函数调用

二、总结

一、onMounted的前世今生

1.1、onMounted是什么

        onMounted钩子函数在组件实例被成功挂载后调用，此时你可以访问到 DOM 元素。它返回一个函数，可以用于在组件卸载时进行清理。

        可以说onMounted钩子函数是最常用的钩子函数了，玩转onMounted钩子函数，是写出优雅的vue前端代码的关键步骤。

1.2、onMounted在vue2中的前身

1.2.1、vue2中的onMounted

        在Vue 2中，onMounted钩子的前身实际上是mounted生命周期钩子。在Vue 2的Options API中，生命周期钩子是作为组件的选项来定义的。

        在Vue 2的组件中，mounted钩子用于执行那些需要在组件实例挂载到DOM之后运行的代码，这通常包括DOM操作、数据请求等。

        比如：

export default {
  data() {
    return {
      // 组件的数据
    };
  },
  mounted() {
    // 组件挂载完成后的副作用操作
    console.log('组件已挂载到DOM');
    // 可以执行DOM操作或数据请求等
  },
  methods: {
    // 组件的方法
  }
};

1.2.2、Vue2与Vue3的onMounted对比

  • Vue 2：使用mounted作为组件的一个选项来执行挂载后的代码。
  • Vue 3：使用onMounted作为Composition API的钩子来执行挂载后的代码。

        在Vue 3中，onMounted是Composition API的一部分，它提供了更灵活的方式来组织组件的逻辑。Vue 3的onMounted与Vue 2的mounted在功能上相似，都是在组件挂载完成后执行，但onMounted作为Composition API的一部分，可以更好地与其它Composition API一起使用，提供更细粒度的控制和更好的组合性。

1.3、vue3中onMounted的用法

1.3.1、基础用法

        这个没什么可说的，和watch、interval语法结构一样。

import { onMounted, ref } from 'vue';

export default {
  setup() {
    const count = ref(0);

    onMounted(() => {
      // 在这里可以执行DOM操作或数据请求
      console.log('组件已挂载');
    });

    // 也可以返回一个函数进行清理
    return {
      count
    };
  }
};

1.3.2、顺序执行异步操作

        onMounted 也常用于执行顺序异步操作，如发起网络请求。

import { onMounted, ref } from 'vue';
import axios from 'axios';

export default {
  setup() {
    const data = ref(null);

    onMounted(async () => {
      try {
        const response = await axios.get('https://api.example.com/data');
        data.value = response.data;
        const response2 = await axios.get('https://api.example.com/data2');
        data.value2 = response2.data;
        const response3 = await axios.get('https://api.example.com/data3');
        data.value3 = response3.data;
        const response4 = await axios.get('https://api.example.com/data4');
        data.value4 = response4.data;
        // ...更多的异步操作
      } catch (error) {
        console.error('请求错误:', error);
      }
    });

    return {
      data
    };
  }
};

1.3.3、并行执行多个异步操作

        onMounted 也常用于执行并行异步操作，也可以发起网络请求。但据我实际使用的经历来看，异步操作能在首屏加载、大量图片等资源加载时发挥不错的作用。

import { ref, onMounted } from 'vue';
import axios from 'axios';

export default {
  setup() {
    // 声明响应式数据引用
    const data = ref(null);
    const data2 = ref(null);
    const data3 = ref(null);
    const data4 = ref(null);

    onMounted(async () => {
      // 使用Promise.all来处理并发的axios请求
      await Promise.all([
        axios.get('https://api.example.com/data'),
        axios.get('https://api.example.com/data2'),
        axios.get('https://api.example.com/data3'),
        axios.get('https://api.example.com/data4')
      ]).then(responses => {
        // 所有请求成功完成后，更新响应式数据
        data.value = responses[0].data;
        data2.value = responses[1].data;
        data3.value = responses[2].data;
        data4.value = responses[3].data;

        // 这里可以放置所有异步任务完成后的代码...
      }).catch(error => {
        // 处理请求中出现的任何错误
        console.error('请求错误:', error);
      });
    });

    // 返回响应式状态供模板或其他Composition API使用
    return {
      data,
      data2,
      data3,
      data4
    };
  }
};

1.3.4、执行一次性副作用

        如果你需要执行一次性的副作用（side effect），onMounted 是一个理想的地方。

        "副作用"（side effect）是指函数在执行时除了返回值之外对外部环境产生的影响。这些影响可能包括但不限于：

  • 修改全局变量：改变在函数外部定义的变量的值。
  • 执行I/O操作：如读写文件、网络请求、控制台日志输出等。
  • 修改外部对象或数组：影响传入函数的参数对象或数组的状态。
  • 触发事件：如点击事件、网络事件等。
  • 定时器设置：设置 setTimeout 或 setInterval。

        这里是利用onMounted钩子函数在组件实例被成功挂载后调用的时序特性，这个组件实例已经挂载，页面首次渲染的时机。在这个阶段可以执行很多操作。

import { onMounted } from 'vue';

export default {
  setup() {
    onMounted(() => {
      // 执行一次性副作用
      console.log('这是一个一次性副作用');
    });

    return {};
  }
};

1.3.5、清理工作（较少用）

        onMounted 提供的函数可以用于注册清理工作，这在处理定时器或监听器时非常有用。不过在onMounted清理的比较少，我见到的在onBeforeUnmount钩子函数清理定时器、监听器的比较多。

import { onMounted, ref } from 'vue';

export default {
  setup() {
    const count = ref(0);

    const intervalId = setInterval(() => {
      count.value++;
    }, 1000);

    // 注册清理工作
    const cleanup = onMounted(() => {
      return () => {
        clearInterval(intervalId);
        console.log('定时器已清理');
      };
    });

    return {
      count,
      cleanup
    };
  }
};

1.3.6、组合使用（特定情况用）

        onMounted 可以与Vue 3的其他Composition API一起使用，以实现复杂的逻辑。这里主要是改变了watch的启动时机，本来是在setup阶段启动watch侦听器，但是这样写就变成了在onMounted阶段启动侦听器。

import { onMounted, ref, watch } from 'vue';

export default {
  setup() {
    const data = ref(null);

    onMounted(() => {
      // 可以组合使用其他Composition API
      watch(data, (newValue, oldValue) => {
        console.log(`数据从 ${oldValue} 变更为 ${newValue}`);
      });
    });

    // 模拟数据变化
    setTimeout(() => {
      data.value = { name: '新数据' };
    }, 2000);

    return {
      data
    };
  }
};

1.3.7、直接将封装好的函数传递给onMounted钩子函数调用

        Vue3中onMounted可以重复使用，多次使用，并不是像vue2那样要写在某一个对象里面。但一般不推荐多次使用，这相当于多个onMounted异步执行操作，分散地写只会增加long terms的可维护性，降低可读性，哪怕是为了迎合和充分利用composition API的特点，我也觉得弊大于利。

function task1() {
  // 初始化任务1
}

function task2() {
  // 初始化任务2
}

onMounted(task1);
onMounted(task2);

二、总结

        onMounted作为vue3中最常用的钩子函数之一，能够灵活、随心应手的使用是每个Vue开发者的必修课，同时根据其不同写法的特性，来选择最合适最有利于维护的写法。

        博客不应该只有代码和解决方案，重点应该在于给出解决方案的同时分享思维模式，只有思维才能可持续地解决问题，只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助，麻烦您点个赞支持一下，还可以收藏起来以备不时之需，有疑问和错误欢迎在评论区指出~

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/641961.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

【机器学习300问】98、卷积神经网络中的卷积核到底有什么用？以边缘检测为例说明其意义。

【机器学习300问】98、卷积神经网络中的卷积核到底有什么用？以边缘检测为例说明其意义。

卷积核是用于从输入数据中提取特征的关键工具。卷积核的设计直接关系到网络能够识别和学习的特征类型。本文让我以边缘检测为例，带大家深入理解卷积核的作用。 一、卷积核的作用 卷积核，又称为过滤器，本质上是一个小的矩阵，其元素…
阅读更多...
ClickHouse 24.4 版本发布说明

ClickHouse 24.4 版本发布说明

本文字数：13148；估计阅读时间：33 分钟 审校：庄晓东（魏庄） 本文在公众号【ClickHouseInc】首发 新的一个月意味着新版本的发布！ 发布概要 本次ClickHouse 24.4版本包含了13个新功能🎁…
阅读更多...
Dalle2学习

Dalle2学习

Dalle2 mini有GitHub库并且有网页可以直接测试
阅读更多...
Logstash笔记

Logstash笔记

目录​​​​​​​ 一、简介 二、单个输入和输出插件 三、多个输入和输出插件 四、pipeline结构 五、队列和数据弹性 六、内存队列 七、持久化队列 八、死信队列 (DLQ) 九、输入插件 1)、beats 2)、dead_letter_queue 3)、elasticsearch 4)、file 5)、redis 十、…
阅读更多...
AI大模型探索之路-实战篇6： Function Calling技术调研之详细流程剖析

AI大模型探索之路-实战篇6： Function Calling技术调研之详细流程剖析

系列篇章💥 AI大模型探索之路-实战篇4：DB-GPT数据应用开发框架调研实践 AI大模型探索之路-实战篇5： Open Interpreter开放代码解释器调研实践 目录 系列篇章💥一、前言二、Function Calling详细流程剖析1、创建OpenAI客户端2、定…
阅读更多...
手机边听边充音频转接器双盲插系列：便捷充电，畅享音乐6500

手机边听边充音频转接器双盲插系列：便捷充电，畅享音乐6500

在快节奏的生活中，手机已经成为我们不可或缺的日常用品。无论是工作、学习还是娱乐，手机都扮演着重要角色。然而，当我们沉浸在音乐的海洋中时，手机电量不足的困扰却时常打断我们的美好体验。为了解决这一难题，手机边听…
阅读更多...
ESP32-C3模组上跑通OTA升级（8）

ESP32-C3模组上跑通OTA升级（8）

接前一篇文章：ESP32-C3模组上跑通OTA升级（7） 本文内容参考： 杂项系统 API - ESP32 - — ESP-IDF 编程指南 latest 文档 《ESP32-C3 物联网工程开发实战》 乐鑫科技 特此致谢！ 七、固件版本 将不同功能的固件标记为…
阅读更多...
好书推荐|MATLAB科技绘图与数据分析

好书推荐|MATLAB科技绘图与数据分析

提升你的数据洞察力，用于精确绘图和分析的高级MATLAB技术 MATLAB科技绘图与数据分析——jd 本书内容 《MATLAB科技绘图与数据分析》结合作者多年的数据分析与科研绘图经验，详细讲解MATLAB在科技图表制作与数据分析中的使用方法与技巧。全书分为3部分&a…
阅读更多...
ChatGPT可以开车吗？分享大型语言模型在自动驾驶方面的应用案例

ChatGPT可以开车吗？分享大型语言模型在自动驾驶方面的应用案例

自动驾驶边缘案例需要复杂的、类似人类的推理，远远超出传统的算法和人工智能模型。而大型语言模型正在致力实现这一目标。 人工智能技术如今正在快速发展和应用，人工智能模型也是如此。拥有100亿个参数的通用模型的性能正在碾压拥有5000万个参数的任务特…
阅读更多...
Java进阶学习笔记11——多态

Java进阶学习笔记11——多态

什么是多态？ 多态是在继承/实现情况下一种现象，表现为：对象多态和行为多态。 同一个对象，在不同时刻表现出来的不同形态。 多态的前提： 要有继承/实现关系 要有方法的重写 要有父类引用指向子类对象。 多态的具体代码…
阅读更多...
电脑文件夹怎么加密？文件夹加密软件推荐

电脑文件夹怎么加密？文件夹加密软件推荐

加密文件夹是保护电脑数据的重要方法，我们可以使用专业的文件夹加密软件来加密保护文件夹。下面小编就为大家介绍三种优秀的文件夹加密软件，安全保护电脑文件夹。 文件夹加密超级大师 文件夹加密超级大师是一款功能强大的文件夹加密软件，文件…
阅读更多...
Spring 模拟管理Web应用程序

Spring 模拟管理Web应用程序

MVC：Model View Controller 1）controller：控制层（Servlet是运行服务器端，处理请求响应java语言编写技术） 2）service：业务层（事务，异常） 3&#xf…
阅读更多...
Apache Hive 安装与配置的详细教程

Apache Hive 安装与配置的详细教程

1. Hive简介 Hive是基于Hadoop的一个数据仓库工具，用来进行数据提取、转化、加载，这是一种可以存储、查询和分析存储在Hadoop中的大规模数据的机制。hive数据仓库工具能将结构化的数据文件映射为一张数据库表，并提供SQL查询功能，能…
阅读更多...
2024-05-22 VS2022使用modules

2024-05-22 VS2022使用modules

点击 <C 语言编程核心突破> 快速C语言入门 VS2022使用modules 前言一、准备二、使用其一, 用VS installer 安装模块:第二个选项就是, 与你的代码一同编译std模块, 这个非常简单, 但是也有坑. 总结 前言 要解决问题: 使用VS2022开启modules. 想到的思路: 跟着官方文档整…
阅读更多...
乡村振兴的乡村环境治理与保护：加强乡村环境治理与保护，改善乡村环境质量，打造美丽宜居的乡村环境

乡村振兴的乡村环境治理与保护：加强乡村环境治理与保护，改善乡村环境质量，打造美丽宜居的乡村环境

一、引言 随着乡村振兴战略的深入实施&#xff0c;乡村环境治理与保护成为推动乡村全面振兴的关键环节。乡村环境是乡村发展的重要基础&#xff0c;关系到农民的生产生活和身心健康&#xff0c;也直接影响到乡村经济的可持续发展。因此&#xff0c;加强乡村环境治理与保护&…
阅读更多...
法律法规与标准化知识

法律法规与标准化知识

阅读更多...
Windows VS2022 C语言使用 sqlite3.dll 访问 SQLite数据库

Windows VS2022 C语言使用 sqlite3.dll 访问 SQLite数据库

今天接到一个学生C语言访问SQLite数据库的的需求： 第一步，SQLite Download Page下载 sqlite3.dll 库 下载解压，发现只有两个文件： 于是使用x64 Native Tools Command Prompt 终端 生成 sqlite3.lib 和 sqlite3.exp文件 LIB -def:sqlite3.def -out:sqlite3.lib -machin…
阅读更多...
React中显示数据

React中显示数据

SX 会让你把标签放到 JavaScript 中。而大括号会让你 “回到” JavaScript 中&#xff0c;这样你就可以从你的代码中嵌入一些变量并展示给用户。例如&#xff0c;这将显示 user.name&#xff1a; return (<h1>{user.name}</h1> ); 你还可以将 JSX 属性 “转义到 …
阅读更多...
PYQT5点击Button执行多次问题解决方案(亲测)

PYQT5点击Button执行多次问题解决方案(亲测)

PYQT5点击Button却执行多次问题 使用pyqt5时遇到问题&#xff0c;UI上按钮点击一次&#xff0c;对应的槽函数却执行了3遍 首先&#xff0c;确认函数名无冲突&#xff0c;UI button名无命名冲突&#xff0c;下图是简单的示例程序&#xff1a; 运行后&#xff0c;点击按钮&#…
阅读更多...
数据库主流技术

数据库主流技术

文章目录 1.分布式数据库1.1 基础知识1.2 体系结构 2.Web数据库3.XML与数据库4.面向对象数据库5.大数据和数据仓库 1.分布式数据库 1.1 基础知识 分布式数据库系统是数据库系统和计算机网络相结合的产物。 由于计算机功能增强&#xff0c;成本下降&#xff0c;几乎每个办公室…
阅读更多...
最新文章

Copyright @ 2022~2023