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

news/2024/11/14 12:01:06/

文章目录

  • 知识回顾
  • 前言
  • 源码分析
    • 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…