当前位置：首页 > news >正文

vue3-新增API组件

news 来源：原创 2025/5/16 6:27:58

shallowRef

创建一个响应式数据，但只对顶层属性进行响应式处理,只跟踪引用值的变化，不关心值内部的属性变化

import {shallowRef} from "vue"
import UserInfo from "@/components/UserInfo.vue";let name = shallowRef("vue")
let info = shallowRef({name:"html"})console.log(name.value) // 响应式数据// shallowRef只处理第一层响应式数据，info.value就已经是一层了，不处理value.name
console.log(info.value.name) // 非响应式数据

shallowReactive

创建一个浅层响应式对象，只会使对象的最顶层属性变成响应式的，对象内部的嵌套属性则不会变成响应式的

import {shallowReactive} from "vue"
import UserInfo from "@/components/UserInfo.vue";let info = shallowReactive({name:"html",address:{"email":123}})console.log(info.name) // 响应式数据console.log(info.address.email) // 非响应式数据

通过使用 shallowRef和 shallowReactive来绕开深度响应。浅层式 API 创建的状态只在其顶层是响应式的，对所有深层的对象不会做任何处理，避免了对每一个内部属性做响应式所带来的性能成本，这使得属性的访问变得更快，可提升性能

readonly

用于创建一个对象的深层只读副本

对象的所有嵌套属性都将变为只读,任何尝试修改这个对象的操作都会被阻止（在开发模式下，还会在控制台中发出警告）

用于创建不可变的状态快照、保护全局状态或配置不被修改

import {reactive, readonly} from "vue"
import UserInfo from "@/components/UserInfo.vue";let info = reactive({name:"html",address:{"email":123}})let address = readonly(info.address)// 修改info.address 会同步修改address
// 但是修改address会被拒绝，address只读

shallowReadonly

与 readonly 类似，但只作用于对象的顶层属性,只将对象的顶层属性设置为只读，对象内部的嵌套属性仍然是可变的,适用于只需保护对象顶层属性的场景

import {reactive, shallowReadonly} from "vue"
import UserInfo from "@/components/UserInfo.vue";let info = reactive({name:"html",address:{"email":123}})let info1 = shallowReadonly(info)// 修改info会同步修改info1
// 但是修改info1会被拒绝，但是可以修改info.1.address

toRaw

用于获取一个响应式对象的原始对象， toRaw 返回的对象不再是响应式的，不会触发视图更新

官网描述：这是一个可以用于临时读取而不引起代理访问/跟踪开销，或是写入而不触发更改的特殊方法。不建议保存对原始对象的持久引用，请谨慎使用。

在需要将响应式对象传递给非 Vue 的库或外部系统时，使用 toRaw 可以确保它们收到的是普通对象

import {reactive, toRaw} from "vue"
import UserInfo from "@/components/UserInfo.vue";// 响应式
let info = reactive({name:"html",address:{"email":123}})// rawInfo变成了原始数据，非响应式数据
let rawInfo = toRaw(info)

markRaw

标记一个对象，使其永远不会变成响应式的

// 定义info
import {markRaw, reactive} from "vue";let info = {name: "vue", ext: {email: 123}}// 转换响应式info
let reactiveInfo = reactive(info)let markRawInfo = markRaw(info)// 不能转换成响应式
let info2 = reactive(markRawInfo)

customRef

自定义ref，使用Vue的ref定义响应式数据，数据发生变化页面会即时更新，而自定义的ref，可以对其依赖项跟踪和更新触发进行逻辑控制

import {customRef} from "vue";let str:string = "hello word"// 创建自定义ref响应式数据，参数是一个回调函数,返回一个对象
// 接收两个参数:track,trigger
let info = customRef((track, trigger) => {return {// info被读取的时候调用get() {// 让vue持续追踪数据，发生变化就去更新track()return str},// info被修改的时候调用set(value:string) {str = value// 前面可以有一些其他处理，处理完再更新// 通知vue页面更新trigger()}}})

Teleprot

Teleport 是一种能够将我们的组件html结构移动到指定位置的技术

<template><!--  使用Teleport 包裹--><!--  to 将对应的代码放到哪个结构里面 --><!-- 可以写元素名、css选择器 --><Teleport to="body"><div><ul><li v-for="data of list" :key="data.id">{{ data.name }}</li></ul></div></Teleport></template>

Suspense

等待异步组件时渲染一些额外内容，让应用有更好的用户体验

<template><!--使用Suspense包裹 --><Suspense><!-- 使用Suspense包裹是用插槽实现的   --><!--    default 默认要展示的内容，异步ok了诚信 --><template v-slot:default><!--  子组件中使用异步请求--><UserInfo></UserInfo></template><!--  异步加载中的时候呈现的内容 --><template v-slot:fallback><p>loading...</p></template></Suspense></template>

vue3-新增API组件

shallowRef 创建一个响应式数据，但只对顶层属性进行响应式处理,只跟踪引用值的变化，不关心值内部的属性变化 import {shallowRef} from "vue" import UserInfo from "/components/UserInfo.vue";let name shallowRef("vue&quo…...

编程日记 2025/5/16 6:27:58

Linux随记（十三）

一、jstack随记运行cmd cd C:\icp-agent\jdk_min\bin 执行 jstack PID > thread_dump.txt （查看PID：tasklist |findstr javaw 查看第二列） thread_dump.txt 取给研发二、让普通用户test，有权限使用docker指令 1、查看当前用…...

编程日记 2025/5/14 3:28:06

AI数据分析工具（一）

Looker Studio（谷歌）-免费优点免费使用：对于中小型企业和个人用户来说，没有任何费用压力，可以免费享受到数据可视化和报表创建的功能。与Google服务集成：特别适合使用Google产品生态的企业，…...

编程日记 2025/5/12 17:15:43

dhcp服务

安装dhcp-libs和dhcp-common软件包是配置DHCP服务器的前提，但仅仅安装这两个软件包并不能直接开启DHCP服务器。您还需要进行以下步骤来完整配置和启动DHCP服务器： 安装DHCP服务器软件包： 除了dhcp-libs和dhcp-common，您还需要安装…...

编程日记 2025/5/14 7:56:25

RSA算法和AES算法，哪种更安全

目录一、RSA (非对称加密算法) 二、AES (对称加密算法) 三、对比总结四、更安全的选择五、结合使用：RSA AES RSA 和 AES 是两种不同类型的加密算法，适用于不同的场景，因此它们的安全性不能直接比较，而是取决于具体的应用…...

编程日记 2025/5/14 1:01:15

反向代理模块开发

1 概念 1.1 反向代理概念反向代理是指以代理服务器来接收客户端的请求，然后将请求转发给内部网络上的服务器，将从服务器上得到的结果返回给客户端，此时代理服务器对外表现为一个反向代理服务器。对于客户端来说，反向代理就相当于…...

编程日记 2025/5/14 2:00:58

（微信小程序）基于Spring Boot的校园失物招领平台的设计与实现（vue3+uniapp+mysql）

💗博主介绍💗：✌在职Java研发工程师、专注于程序设计、源码分享、技术交流、专注于Java技术领域和毕业设计✌ 温馨提示：文末有 CSDN 平台官方提供的老师 Wechat / QQ 名片 :) Java精品实战案例《700套》 2025最新毕业设计选题推荐…...

编程日记 2025/5/11 22:06:57

1-7 GD32函数指针应用

前言： 本博客仅在应用函数指针与回调函数相关的知识，通过实践巩固所学知识，也是对相关知识点的回顾。函数指针与回调函数：1-6 GD32函数指针与回调函数-CSDN博客目录前言： 1.0 程序架构思想 2.0 构建串口结构体 …...

编程日记 2025/5/14 21:11:17

前端js面试知识点思维导图（脑图）

如果看着不清晰可以去https://download.csdn.net/download/m0_73761441/90058523访问下载，无需积分使用百度脑图制作，可以一键导入下面的文本生成自己的脑图 js相关面试题、知识点数据类型 1. 数据类型分类？分别包含&#xff…...

编程日记 2025/5/15 11:12:03

使用 F5 TTS 文字转音频

F5 TTS 支持 ZeroShot 音频克隆，只有将需要音频传给模型，模型既可以生成以对应声音生成的音频，F5 最强大的地方就是可以使用定制的人声。F5 使用了 DIT 架构进行训练，结构如下： 本地使用 F5 TTS F5 使用很简单&#x…...

编程日记 2025/5/11 18:16:08

【笔记】自动驾驶预测与决策规划_Part8_数据驱动的规划方法

文章目录 0. 前言1.生成模型1.1 Diffusion-ES1. Diffusion-ES算法介绍2. Diffusion-ES算法具体流程Diffusion Model 是什么？Diffusion-ES: Evolutionary StrategiesDiffusion-ES MethodDiffusion-ES Mapping Language instructions to reward functions with LLM pr…...

编程日记 2025/5/13 22:18:32

多视图几何中向量叉乘的矩阵转换 Matrix Transformation for Cross Product in MVG

Title: 多视图几何中向量叉乘的矩阵转换 Matrix Transformation for Cross Product in MVG 文章目录 I. 向量叉乘的矩阵转换恒等式II. 符号计算 Maxima 程序推导III. 推论和关联公式的说明1. 推论2. 应用于对极几何中基本矩阵推导3. 应用于基本矩阵与单应矩阵关系4. 与刚体运动…...

编程日记 2025/5/15 0:45:08

面向多用户场景的恢复机制驱动的无线组密钥生成协议

中文标题：面向多用户场景的恢复机制驱动的无线组密钥生成协议英文标题：A Recovery Mechanism-driven Wireless Group Key Generation Protocol for Multi-User Scenarios 作者信息： Huaicong Zhang, Yawen Huang, Jiabao Yu, Boqian Liu, …...

编程日记 2025/5/10 22:01:58

ROS2教程 - 2 环境安装

更好的阅读体验：https://www.foooor.com 2 环境安装下面以 ROS2 的 humble 版本为例，介绍 ROS2 的安装。 ROS1 只能在 ubuntu 系统上安装，ROS2全面支持三种平台：Ubuntu、MAC OS X、Windows10，下面在 Ubuntu22.04 …...

编程日记 2025/5/15 14:36:54

力扣200 岛屿数量 Java版本

文章目录题目描述代码题目描述给你一个由 ‘1’（陆地）和 ‘0’（水）组成的的二维网格，请你计算网格中岛屿的数量。岛屿总是被水包围，并且每座岛屿只能由水平方向和/或竖直方向上相邻的陆地连接形成。 …...

编程日记 2025/5/1 20:23:02

每日速记10道java面试题03

其他资料每日速记10道java面试题01-CSDN博客每日速记10道java面试题02-CSDN博客目录一、你使用过java的反射机制吗？如何应用反射？ 二、什么是泛型？泛型的作用是什么？ 三、java的泛型擦除是什么？ 四、Java 中…...

编程日记 2025/5/10 3:57:51

力扣刷题TOP101：6.BM7 链表中环的入口结点

目录： 目的思路复杂度记忆秘诀 python代码目的 {1,2},{3,4,5}, 3 是环入口。思路这个任务是找到带环链表的环入口。可以看作是上一题龟兔赛跑（Floyd 判圈算法）的延续版：乌龟愤愤不平地举报兔子跑得太快，偷偷…...

编程日记 2025/5/11 15:25:10

智慧防汛平台在城市生命线安全建设中的应用

随着城市化进程的加快，城市基础设施的复杂性和互联性不断增强，城市生命线的安全管理面临前所未有的挑战。智慧防汛平台作为城市生命线安全建设的重要组成部分，通过现代信息技术提升城市防汛应急管理的智能化水平，保障城市安全。 …...

编程日记 2025/5/11 18:16:05

高德应用OceanBase云数据库的升级选型与迁移干货

业务背景高德，DAU已在亿级，时时刻刻都持续不断地产生着庞大的数据。随着数据量的迅猛增长，对现有的业务数据存储能力构成日益严峻的挑战。以我所在部门中的某一大型服务为例，其存储在XDB中的数据量往往达到数百TB之巨&#xf…...

编程日记 2025/5/4 8:09:16

Flink cdc同步增量数据timestamp字段相差八小时（分析｜解决）不是粘贴复制的！

问题我使用flink cdc同步mysql到mysql遇到了timestamp字段缺少八小时的问题。很少无语，flink ,cdc,debezium时区都设置了，没有任何效果！ 分析问题出现在mysql binlog身上！！！ 因为默认mysql会使用UTC来…...

编程日记 2025/5/15 20:45:24

用shell脚本写一个通用的监听程序异常并重启脚本

进来服务器的程序php-fpm时常在并发下时常挂掉，而且时常在凌晨2点以后，通过排查是因为php配置需要调整并发，同时，为了不影响我休息（以前老师说：能用机器和程序解决问题的坚决不用人去操作，这样才…...

编程日记 2025/5/5 20:02:48

使用 Go 语言中的 Context 取消协程执行

使用 Go 语言中的 Context 取消协程执行在 Go 语言中，协程（goroutine）是一种轻量级的线程，非常适合处理并发任务。然而，如何优雅地取消正在运行的协程是一个常见的问题。本文将通过一个具体的例子来展示如何使用 con…...

编程日记 2025/5/15 7:00:10

使用经典的Java，还是拥抱新兴的Rust？

在当代互联网时代的企业级开发中，技术栈的选择往往牵动着每个团队的神经。随着Rust语言的崛起，许多开发团队开始重新思考：是继续坚持使用经典的Java，还是拥抱新兴的Rust？这个问题背后，折射出的是对技术演进…...

编程日记 2025/5/6 8:07:35

《算法导论》英文版前言To the teacher第3段研习录：题海战术有没有？

【英文版】 We have included 957 exercises and 158 problems. Each section ends with exercises, and each chapter ends with problems. The exercises are generally short questions that test basic mastery of the material. Some are simple self-check thought exer…...

编程日记 2025/5/14 3:49:50

XELA - uSkin 三轴触觉传感器：为机器人赋予敏锐触感

XELA Robotics 的 uSkin 触觉传感器以其创新性在机器人技术中备受关注。它凭借高密度设计和三轴力测量能力，大幅提升了机器人的触觉感知能力，这种技术不但增强了机器人的智能化和柔性，还为不同行业的应用创造了广泛的可能性。其中在机器人灵巧…...

编程日记 2025/5/14 21:32:24

k8s常用命令总结

以下是 Kubernetes 所有常用命令的详细总结，涵盖了 kubectl 的各个方面，包括基本操作、资源管理、调试、监控等。每个命令都附有简要说明和示例。 1. 基本命令查看 Kubernetes 版本 kubectl version 查看集群信息 kubectl cluster-info 查看当前上…...

编程日记 2025/5/14 15:09:39

即时通讯| IM+RTC在AI技术加持下的社交体验

即时通讯作为互联网的重要应用之一，见证了中国互联网30年发展的辉煌历程。它从最初的文字交流，发展到如今的语音、视频通话，甚至是虚拟现实社交，已经渗透到生活的社交、娱乐、商务等方方面面，成为现代社会不可或缺的一…...

编程日记 2025/5/9 10:51:40

评估人工智能生成答案准确性

目录评估人工智能生成答案准确性评估人工智能生成答案准确性在评估人工智能（AI）系统生成的答案准确性时，我们主要关注两个方面：事实相似性和语义相似性。这两个方面的加权平均分数被用来衡量系统回答的准确性。事实相似性：事实相似性通过F1分数来计算。F1分数是精确…...

编程日记 2025/5/4 13:38:28

scala的守卫语句格式

import scala.io.StdIn object test49{//从控制台读入一个数字a,使用（StdIn.readInt）//如果a>0并且a<3,打印[0-3]//如果a>4并且a<8,打印[4-8]//否则:打印未匹配 // def main(args: Array[String]): Unit { // val aStdIn.readInt()//等…...

编程日记 2025/5/13 11:37:46

结构型模式-组合模式

组合模式（Composite Pattern）是一种结构型设计模式，它通过将对象组合成树形结构来表示“部分-整体”的层次结构，从而使客户端对单个对象和组合对象的使用具有一致性。适用场景需要表示对象的层次结构：如文件系统、组…...

编程日记 2025/5/11 15:26:28

（超详细图文）PLSQL Developer 配置连接远程 Oracle 服务

1、下载配置文件 （超详细图文详情）Navicat 配置连接 Oracle-CSDN博客将下载的文件解压到单独文件夹，如：D:\App\App_Java\Oracle\instantclient-basic-windows.x64-19.25.0.0.0dbru 2、配置打开 PLSQL Developer，登…...

编程日记 2025/5/15 9:07:01

【AI系统】昇腾 AI 架构介绍

昇腾 AI 架构介绍昇腾计算的基础软硬件是产业的核⼼，也是 AI 计算能⼒的来源。华为，作为昇腾计算产业⽣态的⼀员，是基础软硬件系统的核⼼贡献者。昇腾计算软硬件包括硬件系统、基础软件和应⽤使能等。而本书介绍的 AI 系统整体架构&#…...

编程日记 2025/5/12 10:29:47

D83【python 接口自动化学习】- pytest基础用法

day83 pytest测试用例执行顺序学习日期：20241129 学习目标：http定义及实战 -- pytest测试用例执行顺序学习笔记： 测试用例执行顺序默认执行顺序使用pytest-ordering自定义顺序 pytestrequests练习 import requestsdef test_mobile()…...

编程日记 2025/5/15 9:22:02

浅谈C#库之Memcached

一、Memcached库介绍 Memcached是一个开源的高性能分布式内存缓存系统，它通过将数据存储在内存中来加速动态Web应用。以下是Memcached的一些关键特点： 1、高性能：Memcached使用内存进行数据存储，访问速度极快。 2、分布式&…...

编程日记 2025/5/14 5:44:27

基于Matlab的图像去噪算法仿真

中值滤波的仿真本节选用中值滤波法对含有高斯噪声和椒盐噪声的图像进行去噪，并用Matlab软件仿真。 （1）给图像加入均值为0，方差为0.02的高斯噪声，分别选择33模板、55模板和77模板进行去噪 Matlab部分代码&#xff1…...

编程日记 2025/5/11 21:18:34

YOLOv9改进，YOLOv9引入CAS-ViT（卷积加自注意力视觉变压器）中AdditiveBlock模块，二次创新RepNCSPELAN4结构

摘要 CAS-ViT 是一种为高效移动应用设计的视觉Transformer。模型通过结合卷积操作与加性自注意机制，在保持高性能的同时显著减少计算开销，适合资源受限的设备如手机。其核心组件 AdditiveBlock 通过多维度信息交互和简化的加性相似函数，实现了高效的上下文信息整合，避免了…...

编程日记 2025/5/9 0:59:50

Ubuntu 关机命令

在 Ubuntu 系统中，有几种方法可以关机。以下是常用的关机命令及其说明： 1. 使用 shutdown 命令 shutdown 命令是最常用和最灵活的关机方式。它可以设置定时关机，并且可以发送警告消息给所有登录用户。立即关机 sudo shutdown now定时关机…...

编程日记 2025/5/11 9:06:20

使用Gradle编译前端的项目

使用Gradle编译前端的项目前言项目结构根项目（parent-project）的 settings.gradle.kts后端项目（backend）的 build.gradle.kts前端项目（frontend）的 build.gradle.kts打包bootJar 前言最近的项目都是使用…...

编程日记 2025/5/16 6:27:30

React进阶面试题目（三）

如何在 React 中实现滚动动画？ 在 React 中实现滚动动画可以通过多种方式实现，以下是一个基本的实现步骤： 构建组件：首先构建需要展示滚动动画的组件，例如一个 About 组件，它包含一些文本或元素。监听滚动…...

编程日记 2025/5/15 9:23:00

每日计划-1129

1. 完成 200. 岛屿数量 class Solution { private:void dfs(vector<vector<char>>& grid,int r,int c){int nrgrid.size();int ncgrid[0].size();grid[r][c]0;if (r - 1 > 0 && grid[r-1][c] 1) dfs(grid, r - 1, c);if (r 1 < nr && …...

编程日记 2025/5/12 17:42:20

杭州网世一站式网络解决方案,助力安邦护卫网络升级改造

随着信息技术的不断进步，浙江台州安邦护卫有限公司现有的网络设备已无法满足其日益增长的业务需求。网络性能瓶颈、安全隐患和管理复杂性等问题逐渐凸显，严重影响了企业的运营效率和服务质量。为了解决这些问题，浙江台州安邦护卫有限公司决定…...

编程日记 2025/5/14 2:11:29

vue3.0 根据富文本html页面生成压缩包（含视频在线地址、图片在线地址、前端截图、前端文档）

vue3.0生成压缩包（含在线地址、前端截图、前端文档） 需求描述效果开始下载插件包基本代码构造点击下载按钮1.截图content元素，并转化为pdfcanvas putImageData、getImageDatagetImageData 获取指定矩形区域的像素信息putImageData 将这些数据…...

编程日记 2025/5/12 18:04:05

从0开始学PHP面向对象内容之常用设计模式（享元）

二、结构型设计模式 7、享元模式（Flyweight Pattern） 这里是引用享元模式（Flyweight Pattern） 是一种结构型设计模式，旨在通过共享对象来减少内存使用，尤其适用于大量相似对象的场景。通过共享和重用对象的…...

编程日记 2025/5/13 3:10:59

Idea 2024.3 突然出现点击run 运行没有反应，且没有任何提示。

写这篇文章的目的是为了提供一个新的解决思路，因为存在同病不同原因。如果你进行了1. 检查运行配置 (Run Configuration) 2. 清理和重建项目 3. 清除缓存并重启 IDEA 4.排除kotlin 5.重装idea等等操作之后仍然没有解决，可以试着按一下步骤进行解决。检…...

编程日记 2025/5/14 8:47:32

拥抱 OpenTelemetry：阿里云 Java Agent 演进实践

作者：陈承背景在 2018 年的 2 月，ARMS Java Agent 的第一个版本正式发布，为用户提供无侵入的的可观测数据采集服务。6 年后的今天，随着软件技术的迅猛发展、业务场景的逐渐丰富、用户规模的快速增长，我们逐渐发现过…...

编程日记 2025/5/13 20:44:07

【Linux】开发工具

这篇文章主要涉及sudo指令进行提权的方法，gcc/g的使用并且提及了一些make、makefile sudo指令在前几篇文章中，我们先后了解了对于不同的角色来说，可以进行不同的操作，而对于新建的普通用户是不能进行权限提升的，这是…...

编程日记 2025/5/13 15:14:17

网络通信基础：TCP/IP、UDP、三次握手、Socket与HTTP协议详解

在网络通信的世界中，TCP/IP、UDP、三次握手、Socket和HTTP协议是不可或缺的基本概念。它们构成了网络通信的基石，对于理解网络编程和设计网络应用程序至关重要。本文将详细介绍这些概念，帮助读者更好地理解网络通信的原理。首先&#xff0c…...

编程日记 2025/5/13 7:11:28

（Python）前缀和

前缀和： 前缀和预先计算并存储一系列连续元素的总和，是一种优化技巧，提高算法效率。记录一个数组中各下标位置之前的所有元素的总和，本文对应下标的总和中不含对应下标元素本身。若有需要也可以对应下标记录的总和包含下标本身元…...

编程日记 2025/5/14 3:28:52

【Linux】-操作系统

🔑🔑博客主页：阿客不是客 🍓🍓系列专栏：深入代码世界，了解掌握 Linux 欢迎来到泊舟小课堂 😘博客制作不易欢迎各位👍点赞⭐收藏➕关注一、冯•诺依曼架构&#xff…...

编程日记 2025/5/6 17:18:13

shell echo双引号和单引号区别

echo双引号"" var1"a" var2"b" echo -e "$var1\t$var2"输出： 使用双引号 "" 时，变量会被正确解析。 echo单引号‘’ var1"a" var2"b" echo -e $var1\t$var2输出： …...

编程日记 2025/5/7 23:28:31