【Vue】- 生命周期和数据请求案例分析

news/2024/9/19 4:43:59/ 标签: vue.js, javascript, 前端

文章目录

  • 知识回顾
  • 前言
  • 源码分析
    • 1. 生命周期
    • 2. 请求数据案例分析
  • 拓展知识
  • 总结


知识回顾

前言

  1. Vue生命周期
    ● 就是一个Vue实例从创建 到 销毁 的整个过程。

  2. 生命周期四个阶段:① 创建 ② 挂载 ③ 更新 ④ 销毁
    ● 创建阶段:创建响应式数据
    ● 挂载阶段:渲染模板
    ● 更新阶段:修改数据,更新视图
    ● 销毁阶段:销毁Vue实例

  3. 使用步骤
    ● 先从vue中导入以on打头的生命周期钩子函数
    ● 在setup函数中调用生命周期函数并传入回调函数
    ● 生命周期钩子函数可以调用多次


源码分析

1. 生命周期

<script setup lang="ts">
import {onBeforeMount,onBeforeUnmount,onBeforeUpdate,onMounted,onUnmounted,onUpdated,ref
} from 'vue'// vue 2.0写法
// import { onBeforeMount } from 'vue'
// export default {
//   beforeCreate() {
//     console.log('beforeCreate')
//   },
//   created() {
//     console.log('created')
//   },
//   onBeforeMount() {
//     console.log('onBeforeMount')
//   },
//   beforeMount() {
//     console.log('beforeMount')
//   },
//   mounted() {
//     console.log('mounted')
//   },
//   beforeUpdate() {
//     console.log('beforeUpdate')
//   },
//   updated() {
//     console.log('updated')
//   },
//   beforeUnmount() {
//     console.log('beforeUnmount')
//   },
//   unmounted() {
//     console.log('unmounted')
//   }
// }
const age = ref(18)const timeId = setInterval(() => {age.value++
}, 1000)onBeforeMount(() => {console.log('onBeforeMount')
})
onMounted(() => {console.log('onMounted')
})
onBeforeUpdate(() => {console.log('onBeforeUpdate')
})
onUpdated(() => {console.log('onUpdated')
})
onBeforeUnmount(() => {console.log('onBeforeUnmount')clearInterval(timeId)
})
onUnmounted(() => {console.log('onUnmounted')
})
</script><template><div class="box">子组件</div><div>{{ age }}</div>
</template><style>
.box {width: 300px;height: 300px;background-color: red;
}
</style>
<script setup lang="ts">
import { ref } from 'vue'
import ChildComp from './components/ChildComp.vue'
const isShow = ref(true)
</script><template><div>父组件<!-- 使用子组件 --><ChildComp v-if="isShow" /><Button @click="isShow = !isShow">移除子组件</Button></div>
</template><style lang="css" scoped></style>

2. 请求数据案例分析

<script setup lang="ts">
import axios from 'axios'
import { ref, computed, onMounted } from 'vue'// 接口地址:http://
// 请求方式:getinterface News {id: numbertitle: stringsource: stringcmtcount: numberimg: stringtime: string
}const newsList = ref<News[]>([])
const getNewsList = async () => {const res = await axios.get('http://*******')newsList.value = res.data.data as News[]
}
onMounted(() => {getNewsList()
})
</script><template><div id="app"><ul><li v-for="item in newsList" :key="item.id" class="news"><div class="left"><div class="title">{{ item.title }}</div><div class="info"><span>{{ item.source }}</span><span>{{ item.time }}</span></div></div><div class="right"><!-- v-bind绑定 简写 --><img :src="item.img" alt="" /></div></li></ul></div>
</template><style>
* {margin: 0;padding: 0;list-style: none;
}.news {display: flex;height: 120px;width: 600px;margin: 0 auto;padding: 20px 0;cursor: pointer;
}.news .left {flex: 1;display: flex;flex-direction: column;justify-content: space-between;padding-right: 10px;
}.news .left .title {font-size: 20px;
}.news .left .info {color: #999999;
}.news .left .info span {margin-right: 20px;
}.news .right {width: 160px;height: 120px;
}.news .right img {width: 100%;height: 100%;object-fit: cover;
}
</style>

拓展知识

总结

生命周期

  • 创建阶段
  • 挂载阶段
  • 更新阶段
  • 销毁阶段

生命周期vue2.0 和 vue3.0的区别

  • 深度监听的区别
  • setup 中生命周期名称不同

http://www.ppmy.cn/news/1527527.html

相关文章

【七篇文章从零速通transformer】01 从零开始解密神经网络:深度学习基础全解析

文章简介 本系列文章旨在帮助零基础的读者系统地掌握深度学习,最终能够理解 Transformer 架构。本篇文章是第一篇,我们将从深度学习最核心的知识——神经网络——开始讲解,深入浅出地带你了解神经网络的结构、如何让神经网络工作,激活函数、损失函数、优化器和反向传播等关…

Router安装以及导入

安装 本文适合Vue3的项目使用 安装vue-router4 npm install vue-router4在src目录下创建router的文件夹&#xff0c;并新建一个index.js在index.js中导入vue-router&#xff0c;并定义其实例 import { createRouter, createWebHistory } from vue-router//在其中定义路由 c…

[网络]TCP/IP协议 之 TCP协议的核心机制(2)

文章目录 TCP核心机制1. 确认应答2. 超时重传3. 连接管理三次握手四次挥手 4. 滑动窗口5. 流量控制6. 拥塞控制7. 延时应答8. 捎带应答9. 粘包问题10. 异常情况 TCP核心机制 1. 确认应答 (上篇) 2. 超时重传 (上篇) 3. 连接管理 建立连接的流程: 三次握手 断开连接的流程…

3本SCI/SSCI期刊更名,9月WOS更新!速看!

SCI/SSCI期刊目录9月份已更新&#xff01;快来查收最新动态&#xff01;如有相关领域作者有意投稿&#xff0c;可作为重点关注&#xff01; ​ 期刊动态 2024年9月科睿唯安期刊目录更新 2024年9月18日&#xff0c;科睿唯安更新了WOS期刊目录&#xff0c;此次更新&#xff0c…

OceanBase 运维管理工具 OCP 4.x 升级:聚焦高可用、易用性及可观测性

可视化的管控平台&#xff0c;对 OceanBase 这类的分布式数据库及大规模数据的运维管理来说&#xff0c;是提升运维效率与数据库管理水平的重要工具。OceanBase 运维管理工具 OCP 作为专为OceanBase数据库设计的企业级全生命周期管理平台&#xff0c;为用户提供了全面的数据库可…

RocketMQ出现The broker does not support consumer to filter message by SQL92

在使用RocketMQ使用SQL过滤消息的时候&#xff0c;出现下面错误 原因是我们的配置文件没有开启SQL过滤功能&#xff0c;我们需要在每个配置文件中添加下面命令 #开启过滤消息时支持SQL92标准 enablePropertyFiltertrue接着我们重启namesrv与broker服务就解决问题 # 1.进入bi…

matlab边缘点提取函数

1、边缘提取 matlab自带点云边缘提取函数,用于搜索点云边界,其核心是alpha shapes算法。alpha shapes提取边缘点,主要是依据滚动圆绕点云进行旋转,实现边缘检测,原理如下图所示。具体原理及效果,可以参考之前我写的博客:基于alpha shapes的边缘点提取(matlab)-CSDN博客…

QT之QML从入门到精通(第三章)

QML-Property 关于属性的设置 MyRectangle.qml import QtQuick 2.12 import QtQuick.Window 2.12 //2.15 import QtQuick.Controls 2.12 //可以引入别的控件 import Qt.labs.folderlistmodel 2.12 import Qt.labs.platform 1.0 as PlatformRectangle {id:borderRectrequired…

【FastAPI】实现服务器向客户端发送SSE(Server-Sent Events)广播

在FastAPI中实现服务器向客户端发送SSE&#xff08;Server-Sent Events&#xff09;广播&#xff0c;可以通过以下步骤实现。SSE是一种服务器推送技术&#xff0c;允许服务器发送实时数据到客户端&#xff0c;通常用于创建实时更新的应用程序。 1. 安装必要的依赖 首先&#…

python函数一:函数的概念、函数定义与调用、函数的参数、函数的返回值、说明文档以及函数的嵌套调用

文章目录 1. 函数介绍1.1 函数的概念1.2 函数定义与调用1.2 函数的参数1.3 函数的返回值1.4 说明文档 2. 函数的嵌套调用2.1 嵌套调用及执行流程2.2 嵌套调用的应用 1. 函数介绍 1.1 函数的概念 什么是函数&#xff1f; 函数:是一个被命名的、独立的、完成特定功能的代码段&am…

【爬虫软件】批量采集抖音主页已发布作品

一、背景介绍 以下xx代表你猜中的部分。 1.1 爬取目标 用python开发的xx爬虫采集软件&#xff0c;可自动按博主抓取其已发布视频。 为什么有了源码还开发界面软件呢&#xff1f;方便不懂编程代码的小白用户使用&#xff0c;无需安装python&#xff0c;无需改代码&#xff0c;…

el-input设置type=‘number‘和v-model.number的区别

el-input设置typenumber’与设置.number修饰符的区别 1. 设置type‘number’ 使用el-input时想收集数字类型的数据&#xff0c;我们首先会想到typenumber&#xff0c;设置完type为number时会限制我们输入的内容只能为数字&#xff0c;不能为字符/汉字等非数字类型的数值&…

大数据处理技术:分布式文件系统HDFS

目录 1 实验名称&#xff1a; 2 实验目的 3 实验内容 4 实验原理 5 实验过程或源代码 5.1 HDFS的基本操作 5.2 HDFS-JAVA接口之读取文件 5.3 HDFS-JAVA接口之上传文件 5.4 HDFS-JAVA接口之删除文件 6 实验结果 6.1 HDFS的基本操作 6.2 HDFS-JAVA接口之读取文件 6.…

php变量赋值javascipt变量

javascript变量可以通过document.getElementById()获取html变量值php变量 可以在不同php脚本中使用&#xff0c;最后一次使用变量的初始值位为上一次使用变量的值 <!DOCTYPE html> <html> <body><?php $a "Hello World!"; echo $a; ?> …

Java入门程序-HelloWorld

Java程序开发的三个步骤 1.编写代码得到 .java 源代码文件 2.使用javac编译得到 .class 字节码文件 3.使用java运行 注意事项 建议代码文件名全英文&#xff0c;首字母大写&#xff0c;满足驼峰命名法&#xff0c;源代码文件的后缀必须是.java 开发HelloWorld程序 &…

网络基础,协议,OSI分层,TCP/IP模型

网络的产生是数据交流的必然趋势&#xff0c;计算机之间的独立的个体&#xff0c;想要进行数据交互&#xff0c;一开始是使用磁盘进行数据拷贝&#xff0c;可是这样的数据拷贝效率很低&#xff0c;于是网络交互便出现了&#xff1b; 1.网络是什么 网络&#xff0c;顾名思义是…

SQL Server数据库简单的事务日志备份恢复

模拟数据库备份恢复过程 1.基础操作 1.创建TestDB数据库&#xff0c;并添加数据 USE [master] GO CREATE DATABASE TestDB CONTAINMENT NONE ON PRIMARY ( NAME NTestDB, FILENAME ND:\TestDB.mdf , SIZE 8192KB , MAXSIZE UNLIMITED, FILEGROWTH 65536KB ) LOG ON ( …

【资料分析】刷题日记1

第一套 第二个是相比2019年的增长率&#xff0c;错找为同比增长率 延申&#xff1a; 当出口和进口相比2019年的增长率相同时&#xff0c;可以用盐水解决 √ 一个假设分配&#xff08;第二次是1.4取1&#xff09;加法对比选项 基期倍数&#xff1a; 求A是B的多少倍&#x…

【LLM text2sql】浅看大模型用于text2sql的综述

前言 之前笔者分享了text2sql & LLM & KG的有机结合实现KBQA的问答&#xff0c; 《【LLM & RAG & text2sql】大模型在知识图谱问答上的核心算法详细思路及实践》、 《【开源分享】KBQA核心技术及结合大模型SPARQL查询生成问答实践》。 我们再来看看大模型在te…

SAP B1 Web Client MS Teams App集成连载二:安装Install/升级Upgrade/卸载Uninstall

一、安装/Install 过程/Procedure&#xff1a; 1.获取应用包并将其解压缩/Get the app package and unzip it。 导航到 SAP Business One 产品包的以下文件夹&#xff1a;Packages.x64\MS Teams Integration\ Navigate to the following folder in the SAP Business One prod…