1小时构建Vue3知识体系之vue的生命周期函数

本文转载自:https://fangcaicoding.cn/course/12/63

大家好!我是方才,目前是8人后端研发团队的负责人,拥有6年后端经验&3年团队管理经验

系统学习践行者!近期在系统化输出前端入门相关技术文章,期望能帮大家构建一个完整的知识体系。

如果对你有所帮助,记得一键三连!

我创建了一个编程学习交流群(扫码关注后即可加入),秉持“一群人可以走得更远”的理念,期待与你一起 From Zero To Hero!

茫茫人海,遇见即是缘分!方才兄送你ElasticSearch系列知识图谱、前端入门系列知识图谱、系统架构师备考资料!

Hello,大家好!我是方才,前面我们已经掌握了vue的响应式,成功让“数据动了起来”,在实际的工程项目中,数据一般是由接口提供的,前端可以专注于页面的渲染和用户交互。

那这里就会有一个问题,我们应该在什么时候去调用接口,获取页面数据呢?

从用户的访问交互来说,肯定是期望网页一打开就有数据的,这个时候vue的生命周期钩子就排上用场了。

生命周期图示

所谓的生命周期函数就是组件实例从创建到销毁过程中不同时间点自动调用的函数。

vue基本上在每个处理节点,均提供了钩子方便我们使用(ps:什么是钩子?简单理解就是一个函数。当满足一定条件就会被自动执行的函数)。

这里直接引用官方的图示,大家重点关注Mounted即可。

组件生命周期图示

onMounted()-最常用

onMounted()的作用是注册一个回调函数,在组件挂载完成后执行,粗暴点理解就是,当页面“加载完成后”,就会调用该方法。

以下引用官方的介绍:

  • 类型

    function onMounted(callback: () => void): void
    
  • 详细信息

    组件在以下情况下被视为已挂载:

    • 其所有同步子组件都已经被挂载 (不包含异步组件或 <Suspense> 树内的组件)。
    • 其自身的 DOM 树已经创建完成并插入了父容器中。注意仅当根容器在文档中时,才可以保证组件 DOM 树也在文档中。

    这个钩子通常用于执行需要访问组件所渲染的 DOM 树相关的副作用,或是在服务端渲染应用中用于确保 DOM 相关代码仅在客户端执行。

    这个钩子在服务器端渲染期间不会被调用。

使用示例

官方的解释看着可能有点难以理解,但这不重要。我们一起来做个demo,就很容易理解了。

就用我的博客系统首页来说,当页面加载完成后,需要自动调用后端接口,获取文章列表,那如何实现呢?直接看代码:

<!--负责 HTML 结构的部分,所有展示的内容都在这里定义。-->
<template><h1>{{ articleList[0].title }}}</h1><p>{{ articleList[0].summary }}</p><p>作者:{{ articleList[0].author }}</p><p>阅读量:{{ articleList[0].readCt }}</p></template><!--逻辑的“后台”,数据、方法和生命周期钩子全在这里,`JavaScript`的代码就编写在这个标签下。-->
<script setup>
import {onMounted, ref} from "vue";const articleList = ref([{title: "一小时构建Vue知识体系-default",summary: "关注方才兄,一小时构建Vue知识体系-default",author: "方才",readCt: 12
}])onMounted(() => {// 模拟异步API请求数据setTimeout(() => {articleList.value = [];articleList.value.push({title: "一小时构建Vue知识体系-async",summary: "关注方才兄,一小时构建Vue知识体系-async",author: "方才-async",readCt: 19})}, 2000)
})</script><!--用``CSS``定义组件样式,加上``scoped``后样式只会在这个组件内生效,不会影响别的地方。-->
<style scoped></style>

直接运行项目,效果就是,最初展示xx-default的文章内容,2s后【实际API请求会这个快很多的,只是为了更好的演示效果】,数据会被更新,自动渲染xx-async的内容:

image-20241112204026214

其他钩子

在实际项目中,若需要在生命周期的其他环节,进行函数处理,可以再去阅读官网(https://cn.vuejs.org/api/composition-api-lifecycle#onerrorcaptured),选用合适的钩子函数,完成预期的功能即可。

image-20241112205545531

写在最后

方才兄个人习惯,在学习新技术时,会先建立一个完整的知识体系,了解其全貌,重点掌握常用的知识点;对于一些不常用的内容,简单阅读,有个印象即可,当真需要使用的时候,知道去哪里找参考资料即可。


近期更新计划

近期更新计划(有需要的小伙伴,记得点赞关注哟!)

  1. 输出vue、router、elementplus等前端框架技术文章,期望能帮助大家快速建立相关的知识体系;
  2. 基于vue3+springboot3的前后端分离的博客系统已经开源啦,欢迎大家star!https://gitee.com/fangcaicoding/fangcai-coding-blog

“学编程,一定要系统化”——若你也是系统学习的践行者,记得点赞关注,期待与你一起 From Zero To Hero!

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

数据结构-集合

一.集合的表示 一个重要的操作是查某个元素属于哪个集合&#xff0c;另一个操作是合并操作 从这个树的节点去找树根也就是从下往上找,要把树并起来只需把两个根并在一起就可以了 不存在已知一个节点去找孩子节点&#xff0c;根重要的是已知一个节点找它的父亲节点,与之前的二…

unity基础,点乘叉乘。

简单记录下点乘叉乘&#xff0c;要不每次用完就忘&#xff0c;忘了又查。 using System.Collections; using System.Collections.Generic; using UnityEngine;public class TestCrossDot : MonoBehaviour {/// <summary>/// 原点/// </summary>public Transform t…

springboot 之 整合springdoc2.6 (swagger 3)

版本 springboot 3.3.5 jdk 17 springdoc 2.6.0 依赖pom <dependency><groupId>org.springdoc</groupId><artifactId>springdoc-openapi-starter-webmvc-ui</artifactId><version>2.6.0</version> </dependency>注解对比…

数据结构与算法-前缀和数组

前缀和问题 什么是前缀和? 对于一个一般数组 nums,如果我们需要知道 S1 nums[0] nums[1]的结果&#xff0c; S2 nums[0] nums[1] nums[2] … 计算公式相当于: S2 S1 nums[2] … Sn Sn-1 nums[n]; 所谓前缀和&#xff1a;用来记录数组前项和的一个新数组&#xff0c;提…

R语言机器学习与临床预测模型77--机器学习预测常用R语言包

R小盐准备介绍R语言机器学习与预测模型的学习笔记 你想要的R语言学习资料都在这里&#xff0c; 快来收藏关注【科研私家菜】 01 预测模型常用R包 常见回归分析包: rpart 包含有分类回归树的方法; earth 包可以实现多元自适应样条回归; mgev包含广义加性模型回归; Rweka 包中的M…

Elasticsearch可视化工具Elasticvue插件用法

目录 1.打开浏览器扩展程序(示例Edge浏览器) ​2.搜索elasticvue并安装 3.打开elasticvue ​4.连接Es 5.有些浏览器无法下载安装扩展&#xff0c;例如谷歌。可以打包扩展给别的浏览器使用。 5.1打开浏览器扩展&#xff0c;打开开发人员模式&#xff0c;记住扩展程序id 5…

大数据技术之HBase中的HRegion

如果你正在学习大数据&#xff0c;你应该知道HBase是一个列式存储的NoSQL分布式数据库&#xff0c;可以配合Hadoop来使用。今天自己简单做了几页PPT&#xff0c;解释了一下HBase当中HRegion的基本概念&#xff0c;很多初学者在学习的时候对HRegion这个概念一直懵懵懂懂&#xf…

Spring Cloud Contract快速入门Demo

1.什么是Spring Cloud Contract &#xff1f; Spring Cloud Contract 是 Spring 提供的一套工具&#xff0c;用于帮助开发者通过契约&#xff08;Contract&#xff09;驱动的方式进行微服务的测试和集成。它主要解决微服务之间通信时&#xff0c;如何确保服务提供者和消费者之…

GISBox VS ArcGIS:分别适用于大型和小型项目的两款GIS软件

在现代地理信息系统&#xff08;GIS&#xff09;领域&#xff0c;有许多大家耳熟能详的GIS软件。它们各自具有独特的优势&#xff0c;适用于不同的行业需求和使用场景。在众多企业和开发者面前&#xff0c;如何选择合适的 GIS 软件成为了一个值得深入思考的问题。今天&#xff…

Linux 进程线程间通信总结

线程 线程共享存储空间主要带来的问题是数据同步和互斥。由于线程在同一进程中运行&#xff0c;它们共享相同的内存空间&#xff0c;任何线程都可以访问共享数据。这样&#xff0c;多个线程并发执行时&#xff0c;可能会导致以下两种主要问题&#xff1a; 互斥问题&#xff0…

【再谈设计模式】抽象工厂模式~对象创建的统筹者

一、引言 在软件开发的世界里&#xff0c;高效、灵活且易于维护的代码结构是每个开发者追求的目标。设计模式就像是建筑蓝图中的经典方案&#xff0c;为我们提供了应对各种常见问题的有效策略。其中&#xff0c;抽象工厂模式在对象创建方面扮演着重要的角色&#xff0c;它如同一…

Web安全之SQL注入---基础

文章目录 SQL注入简介SQL注入基础SQL注入分类SQL注入流程 SQL注入简介 什么是SQL注入&#xff1f; SQL注入即是指web应用程序对用户输入数据的合法性没有判断或过滤不严&#xff0c;攻击者可以在web应用程序中事先定义好的查询语句的结尾上添加额外的SQL语句&#xff0c;在管理…

机器学习——贝叶斯

&#x1f33a;历史文章列表&#x1f33a; 机器学习——损失函数、代价函数、KL散度机器学习——特征工程、正则化、强化学习机器学习——常见算法汇总机器学习——感知机、MLP、SVM机器学习——KNN机器学习——贝叶斯机器学习——决策树机器学习——随机森林、Bagging、Boostin…

gdb编译教程(支持linux下X86和ARM架构)

1、下载源码 http://ftp.gnu.org/gnu/gdb/ 我下载的8.2版本。 2、下载完后拷贝到linux的x86系统。 3、解压&#xff0c;然后进入到目录下&#xff0c;打开当前目录的命令行窗口。 4、创建一个生成目录。 5、我们先开始x86版本&#xff0c;这个比较简单&#xff0c;不需要配置…

10款翻译工具实践体验感受与解析!!!!!

在现今的数字化时代&#xff0c;翻译工具如同语言的桥梁&#xff0c;为我们打开了通向世界的大门。今天咱们不聊别的&#xff0c;就聊聊那些让我又爱不释手的翻译工具们。因为我的职业因素&#xff0c;作为一个经常需要跟各种语言打交道的“文字搬运工”&#xff0c;这些工具可…

【日志】392.判断子序列

2024.11.8 【力扣刷题】 392. 判断子序列 - 力扣&#xff08;LeetCode&#xff09;https://leetcode.cn/problems/is-subsequence/?envTypestudy-plan-v2&envIdtop-interview-150 整个题从一开始就是打算从双指针的思想往下走的。但是&#xff0c;我设置了四个变量sLeft…

C++20 中最优雅的那个小特性 - Ranges

C20 中最优雅的那个小特性 - Ranges 大家好&#xff0c;今天我们来聊聊 C20 的一项非常重要的新特性——Ranges&#xff0c;可以让你的代码更优雅、更高效、更炫酷&#xff0c;如果你是一个对代码有所追求的小伙伴&#xff0c;那么这个特性你绝对值得拥有&#xff01; 啥是 …

Python多进程间通讯(包含共享内存方式)

文章目录 1 通过非共享内存配合队列方式2 通过共享内存配合队列方式 注&#xff1a;本博文测试环境为Linux系统。 1 通过非共享内存配合队列方式 下面是一个常见的生产者与消费者的模式示例&#xff0c;这里分别启动了两个子进程&#xff0c;一个为生产者&#xff08;producer…

深入理解接口测试:实用指南与最佳实践5.0(一)

✨博客主页&#xff1a; https://blog.csdn.net/m0_63815035?typeblog &#x1f497;《博客内容》&#xff1a;.NET、Java.测试开发、Python、Android、Go、Node、Android前端小程序等相关领域知识 &#x1f4e2;博客专栏&#xff1a; https://blog.csdn.net/m0_63815035/cat…

2024.11.12_大数据的诞生以及解决的问题

大数据的诞生以及解决的问题 视频一&#xff1a;大数据诞生的背景原因&#xff1a;传统的数据处理架构无法满足海量的数据存储和计算需求 视频三&#xff1a;区分离线处理场景和实时处理场景视频五&#xff1a;传统的大数据与现代的大数据区别&#xff08;离线场景&#xff09;…