====================
快速跳转：
我的个人博客主页👉：Reuuse博客
新开专栏👉：Vue3专栏
参考文献👉：uniapp官网
免费图标👉：阿里巴巴矢量图标库
❀ 感谢支持！☀
==================
前情提要
🔺因为最近学习的vue语言，发现有很多细节的碎块需要汇总，所以就有了本次系列的开始。❀❀❀
⭐总结的知识会包含总结定义，和源代码解析，可以当作类似于英语单词一样瞄几眼，大概知道即可
那么话不多说我们开始吧
vue
uni.request发起网络请求3种回调结果调用
在使用 uni.request 发起网络请求时，你可以处理三种回调结果：成功、失败和完成。以下是如何实现这三种回调的示例代码：
uni.request({
url: 'https://example.com/api', // 替换为你的API地址
method: 'GET', // 或者 'POST'，根据需要选择
data: {
// 发送的数据
key1: 'value1',
key2: 'value2'
},
success: function (res) {
// 请求成功的回调函数
console.log('请求成功:', res);
// 在这里处理成功的逻辑
},
fail: function (err) {
// 请求失败的回调函数
console.error('请求失败:', err);
// 在这里处理失败的逻辑
},
complete: function () {
// 请求完成的回调函数（无论成功或失败都会执行）
console.log('请求完成');
// 在这里处理完成的逻辑
}
});
详细说明：
- success: 当请求成功时调用此回调函数。
res参数包含服务器返回的数据。 - fail: 当请求失败时调用此回调函数。
err参数包含错误信息。 - complete: 无论请求成功还是失败，都会调用此回调函数。通常用于清理操作或更新UI状态。
通过这种方式，你可以分别处理请求成功、失败和完成的情况，确保应用在不同情况下都能做出适当的响应。
异步和同步有什么区别?
它俩的区别嘛，主要是执行方式和应用场景啦！同步API呢，就像排队买票，得一个一个来，前面的搞定了后面的才能动。异步API就不一样啦，它像是同时开好几个窗口，大家可以一起买，不用等前面的人哦。这样，程序运行起来就更高效啦！
- 异步同步化
是指通过某种方式将异步操作的结果以同步的方式返回。例如，在一个Web应用中，服务器需要从数据库获取数据然后返回给客户端。如果使用同步调用，服务器会等待数据库操作完成后再继续执行后续代码。但如果使用异步操作，服务器可以在等待数据库响应的同时处理其他任务。当数据库操作完成时，通过回调函数或通知机制将结果返回给服务器，这样即使操作是异步的，最终的效果却像是同步的。
CSS选择前前面.区别
在 CSS 中，选择器前面加上 . 和不加上 . 有本质上的区别，因为它们选择完全不同的元素类型。
带 . 的选择器
-
意义：选择器前面加
.表示这是一个类选择器（class selector），用于选中具有特定类属性的元素。 -
用法：类选择器前加上
.，其后的名称是元素的class属性值。 -
示例：
.input { /* 这里的样式将应用于 class="input" 的所有元素上 */ color: red; }<input class="input" type="text" /> <div class="input">这是一个 div 元素，但有 class 属性值为 "input"</div>在这个例子中，任何有
class="input"的元素都会应用到.input类定义的样式。
不带 . 的选择器
-
意义：不带
.的选择器是标签选择器（element selector），用于选择所有特定类型的 HTML 元素。 -
用法：直接使用标签名称来作为选择器。
-
示例：
input { /* 这里的样式将应用于所有 <input> 元素上 */ color: blue; }<input type="text" /> <input type="password" />在这个例子中，页面上的所有
<input>元素都会应用到input标签定义的样式。
更详细的区别
-
选择器类型：
- 类选择器（带
.）：用于选中特定的class属性值的元素，可以选择多个不同类型的元素。 - 标签选择器（不带
.）：用于选中特定类型的 HTML 标签元素（如div,span,input等），会应用于所有这种标签的元素。
- 类选择器（带
-
使用场景：
- 类选择器：常用于需要重复使用的样式定义。例如，为了一致性地设置多个不同标签的样式。
- 标签选择器：常用于为某一类型的 HTML 标签设置全局样式。
示例
为了帮助理解，这里有一个包括两种选择器的完整示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Selector Example</title>
<style>
/* 类选择器 */
.input {
color: red; /* 设置字体颜色为红色 */
border: 2px solid red; /* 设置红色边框 */
}
/* 标签选择器 */
input {
background-color: lightyellow; /* 设置背景颜色为浅黄色 */
padding: 10px; /* 设置内边距 */
}
</style>
</head>
<body>
<input type="text" class="input" value="这是一个带有类属性的输入框">
<input type="password" value="这是一个普通的输入框">
<div class="input">这是一个有类属性的 div 元素</div>
<p class="input">这是一个有类属性的 p 元素</p>
</body>
</html>
结果解读
-
类选择器
.input：- 红色字体、红色边框将应用于所有
class="input"的元素上，包括input、div、p等标签。
- 红色字体、红色边框将应用于所有
-
标签选择器
input：- 浅黄色背景和内边距将应用于所有
input标签上，包括有和没有class="input"属性的input元素。
- 浅黄色背景和内边距将应用于所有
总结
- 类选择器（
.input）：用来选中具有特定类属性的所有元素。 - 标签选择器（
input）：用来选中所有特定类型的 HTML 标签。
emit的声明触发事件
emit就是用来触发自定义事件的。子组件通过$emit方法触发事件，父组件用v-on（缩写为@）来监听这些事件。这样，父子组件之间就能通信啦！
========= xxx-child ========
<template>
<view>
子组件
<view>1.$为关键字 -（自定义事件名称，传值） = 自定义一个add事件发送123</view>
<view class="one">
当点击按钮的时候，组件就会向demo3发送事件带有随机值
</view>
<!-- <button @click="$emit('add',Math.random())">按钮</button> -->
<!-- 在这里，子组件的信息就可以传给父，发送了一个事件传给父 -->
<button @click="onClick">按钮</button>
<view>==========================</view>
<input type="text" @input="onInput"/>
</view>
</template>
<script setup>
const emit = defineEmits(["add","change"])
function onClick(){
emit("add",Math.random())
}
function onInput(e){
console.log(e.detail.value);
emit("change",e.detail.value);
// 事件change传值
}
</script>
<style lang="scss" scoped>
.one{
background: pink;
}
input{
border:1px solid #cfcfcf;
height:40px;
}
</style>
========== demo 3 ============
<template>
<view class="">
<!-- @add在这里使用click没有任何区别 -->
<xxm-child @add="onAdd" @change="onChange"></xxm-child>
<view class="box" :style="{background:color,fontSize:size+'px'}">num:{{num}}</view>
</view>
</template>
<script setup>
import {ref} from "vue"
const num = ref(0);
const color = ref('#ccc');
const size = ref(12);
const onAdd = function(e){
console.log(e);
// 这里就可以接受传过来的 123
num.value = e;
color.value = "#" + String(e).substring(3,6);
}
const onChange = function(e){
console.log(e);
size.value = e;
}
</script>
<style lang="scss" scoped>
.box{
width: 200px;
height: 200px;
}
</style>
onShow和onHide钩子的对比和执行顺序
onShow和onHide是React组件生命周期中的钩子函数，它们分别在组件即将显示和隐藏时执行。
- onShow：当组件即将显示时调用，通常用于在组件显示前进行一些初始化操作，如加载数据、设置状态等。
- onHide：当组件即将隐藏时调用，通常用于在组件隐藏前进行一些清理操作，如释放资源、保存数据等。
执行顺序：
- 当组件从隐藏状态变为显示状态时，先执行onShow钩子函数，然后执行组件的渲染。
- 当组件从显示状态变为隐藏状态时，先执行组件的卸载，然后执行onHide钩子函数。
========== demo6=============
<template>
<view class="">
name: {{name}} - {{age}}
<scroll-view scroll-y="true" ref="scroll" >
<view></view>
</scroll-view>
<navigator url="/pages/demo5/demo5">跳转到demo5</navigator>
<view>==============</view>
<view>计数：{{counts}}</view>
</view>
</template>
<script setup>
import {onBeforeMount, onMounted,ref} from "vue"
import {onLoad,onReady,onShow,onHide} from "@dcloudio/uni-app"
const name = ref("张三")
const age = ref("18")
const scroll = ref(null)
const counts = ref(0)
let time= setInterval(()=>{
counts.value++
},50)
onLoad((e)=>{
// onload 有一个回调函数
console.log("onload函数")
console.log(e)
name.value = e.name
age.value = e.age
})
onShow(()=>{
// 先执行onlode 再执行onshow
//无论是跳转页面还是返回页面,都会触发onShow
console.log("onShow函数");
time= setInterval(()=>{
counts.value++
},50)
})
onHide(()=>{
console.log("onHide函数");
clearInterval(time)
//切走页面会停下来
})
onReady(()=>{
console.log("onReady函数");
// 监听页面初次渲染完成，此时组件已挂载完成，
// DOM 树($el)已可用，注意如果渲染速度快，
// 会在页面进入动画完成前触发
})
onBeforeMount(()=>{
console.log("onBeforeMount函数")
})
onMounted(()=>{
console.log("onMounted函数")
})
</script>
<style lang="scss" scoped>
</style>
===================================
onlode 、onshow和onready有什么区别？
它们在触发时机、执行次数和用途上有所不同。以下是具体分析：
-
触发时机
- onLoad：页面加载时触发，即当页面被创建并准备加载时。
- onShow：页面显示或切入前台时触发。
- onReady：页面初次渲染完成时触发。
-
执行次数
- onLoad：只触发一次，即首次打开页面时调用，之后页面再次打开（如通过页面跳转返回）则不会再次触发。
- onShow：每次打开页面（包括首次打开和从其他页面返回）都会调用。
- onReady：每个页面在其生命周期内只会调用一次。
-
用途
- onLoad：通常用于页面的数据初始化，如从服务器获取数据、设置页面的初始状态等。
- onShow：常用于页面显示时的数据更新、页面刷新、用户信息获取、数据统计和埋点等。
- onReady：用于在页面初次渲染完成后执行某些操作，如操作DOM、设置定时器、调用API等。
综上所述，onLoad适合用于数据初始化和页面状态设置等需要在页面加载时完成的操作；onShow适合用于页面显示时的数据更新、页面刷新、用户信息获取等需要在页面每次显示时进行的操作；而onReady确保了在页面初次渲染完成后执行代码，但需要注意异步数据可能还未加载完成。
🌼那么今天就到这里吧！
▲这次的知识汇总框架只是一次尝试，后续会陆续跟新vue系列。再后来会逐渐成熟，向大家展现更简洁明了的知识汇总！
一个小小的赞是对我最大的鼓励！
感谢你们看到这里，下次见~
扫一扫
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
