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

Vue —— 实用的工具函数

news 来源：原创 2025/8/22 23:18:02

响应式数据管理
- 1. toRef 和 torefs
- 2. shallowRef 和 shallowReactive
- 3. markRaw
依赖追踪与副作用
- 1. computed
- 2. watch 和 watchEffect
类型判断与优化
- 1. unref
- 2. isRef 、isReactive 和 isProxy
组件通信与生命周期
- 1. provide 和 inject
- 2. nextTick
高级工具
- 1. useAttrs 和 useSlots

响应式数据管理

1. toRef 和 torefs

作用： 将响应式对象的属性转换为 ref，保持解构后的响应性
场景： 解构 reactive 对象时避免丢失响应性
示例：

import { reactive, toRef, toRefs } from 'vue';const state = reactive({ x: 1, y: 2 });// 解构单个属性
const xRef = toRef(state, 'x');  // xRef.value 始终同步 state.x// 解构所有属性
const { y } = toRefs(state); // y.value 同步 state.y

2. shallowRef 和 shallowReactive

作用： 创建浅层响应式数据（只跟踪顶层的属性变化）。
场景： 优化性能，避免深度监听大对象
示例：

const shallowState = shallowReactive({nested: { data : 'value' }  // 修改 nested.data 不会触发响应式更新
})const shallowCount = shallowRef({ value : 0 });
shallowCount.value.value = 1; // 不会触发响应式更新

3. markRaw

作用： 标记对象为 “ 非响应式 ”，避免被 Vue 转换为代理。
场景： 处理第三方库对象或性能敏感数据。
示例：

const rawObject = markRaw({ data : 'static' });
const state = reactive({ rawObject }); // rawObject 不会被代理

依赖追踪与副作用

1. computed

作用： 创建依赖其他响应式数据的计算属性。
场景： 缓存复杂计算结果，避免重复计算
示例：

const count = ref(0);
const doubled = computed(()=> count.value * 2);console.log(doubled.value);  // count 变化后自动更新

2. watch 和 watchEffect

作用： 监听数据变化并执行副作用

watch: 显式指定监听目标
watchEffect: 自动追踪依赖

示例：

const count = ref(0);// 监听 count 变化
watch(count, (newVal, oldVal)=>{console.log(`Count changed from ${oldVal} to ${newVal}`)
});// 自动追踪依赖
watchEffect(() => {console.log(`Count is ${count.value}`);
})

类型判断与优化

1. unref

作用： 快速获取 ref 的值（如果是 ref 返回 .value，否则返回原值）。
场景： 简化 ref 和普通值的混合处理
示例：

const x = ref(10);
const rawValue = 20;console.log(unref(x));    // 10 不用x.value
console.log(unref(rawValue)); // 20

2. isRef 、isReactive 和 isProxy

作用： 判断变量类型

isRef(value): 是否为 ref 对象
isReactive(value): 是否为 reactive 创建的响应式对象
isProxy(value): 是否为 reactive 或 readonly 代理

示例：

const count = ref(0);
const state = reactive({ x: 1 });console.log(isRef(count));      // true
console.log(isReactive(state)); // true
console.log(isProxy(state));    // true

组件通信与生命周期

1. provide 和 inject

作用： 跨层级组件传递数据
场景： 避免逐层传递 props
示例：

// 父组件
import { provide } from 'vue';
provide('theme', 'dark');// 子组件
import { inject } from 'vue';
const theme = inject('theme', 'light'); // 默认值 'light'

2. nextTick

作用： 在 DOM 更新后执行回调
场景： 操作更新后的 DOM 元素
示例：

import { nextTick } from 'vue';const updateData = async () => {data.value = 'new value';await nextTick();console.log('DOM 已更新');
}

高级工具

1. useAttrs 和 useSlots

作用： 在 script setup 中访问组件的 attrs 和 slots
场景： 处理未声明为 props 的属性或动态插槽
示例：

<script setup>
import { useAttrs, useSlots } from 'vue';const arrts = useAttrs();  // 获取所有非 props 属性
const slots = useSlots();  // 获取插槽内容
<script>

总结：合理使用这些工具，可以大幅度提升代码的简洁性和可维护性，同时避免常见的响应式陷阱

Vue —— 实用的工具函数

目录响应式数据管理1. toRef 和 torefs2. shallowRef 和 shallowReactive3. markRaw 依赖追踪与副作用1. computed2. watch 和 watchEffect 类型判断与优化1. unref2. isRef 、isReactive 和 isProxy 组件通信与生命周期1. provide 和 inject2. nextTick 高级工具1. useAttrs …...

编程日记 2025/8/22 23:18:02

Langchain + Gemini API调用基本操作

本文参考Langchain中ChatGoogleGenerativeAI的官方文档，在本地的jupyter notebook中运行。关于API的细节在官方文档最开头给出： 我们在使用时，可以选择model"gemini-2.0-flash-001"或者生成图片的ChatGoogleGenerativeAI(model“…...

编程日记 2025/8/21 4:44:09

软件线上故障复盘报告

软件线上故障复盘报告‌ ‌故障编号‌：INC-2024XXX ‌复盘日期‌：YYYY-MM-DD ‌参与人员‌：研发/运维/测试/产品/客服负责人一、故障概况 1.1 基础信息字段内容数据来源故障等级P0/P1/P2（参考SLA分级标准）运维告警…...

编程日记 2025/8/22 23:09:27

分享：批量提取图片文字并自动命名文件，ocr识别图片指定区域并重命名文件名工具，基于WPF和腾讯OCR识别的接口的视线方案

一、项目背景在处理大量图片时，常常需要从图片中提取特定区域的文字信息，并依据这些信息对图片进行重命名。例如，在档案管理领域，大量纸质文件被扫描成图片后，需要从图片中提取关键信息（如文件编号、日期等）来重命名图片，以便后续的检索和管理；在电商领域，商家可能…...

编程日记 2025/8/21 2:34:34

SIMULIA-Abaqus有限元分析软件针对汽车行业的解决方案

汽车行业是Abaqus软件的一个重要应用领域，许多知名的汽车企业都是Abaqus的用户，本文为您重点介绍Abaqus针对汽车行业有哪些应用及其解决方案。 Abaqus是一款什么软件： Abaqus公司是世界知名的计算机仿真行业的软件公司，成立于197…...

编程日记 2025/8/19 20:29:13

linux下使用php修改php.ini的session.save_path无效的解决办法

linux下安装php的组合还是php-fpm和nginx，其实已经安装好了，网站已经能够跑起来了，但是遇到后台登录的时候验证码一直不对，看了下报错，session无法存储，于是新增了一个phpinfo文件，使用web查看下…...

编程日记 2025/8/22 23:16:53

脚本-QQ批量发送消息（图片和文字）

目录代码代码功能详解注意事项致谢代码 import io import traceback import win32clipboard import pyautogui import pyperclip import win32gui # 替换为pywin32的正确模块名 import pandas as pd import time from PIL import Imageclass QQAutoMessage:def __in…...

编程日记 2025/8/17 18:28:44

高等数学A1 期末救济（导数）

基于song复习闭区间上连续函数的性质在闭区间里，f(x)连续> f(x)有界导数导数三种定义及不同写法常用导数公式可导→连续，但连续❎→可导切线类问题求解求某点切线方程与求过某点的切线方程反函数求导法则反函数的导数直接函数导数的导数例…...

编程日记 2025/8/22 7:43:07

前端VUE框架理论与应用（7）

一、用 v-for 把一个数组对应为一组元素我们可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。在 v-for 块中，我们可以访问所有父作用域的属性。v-for 还…...

编程日记 2025/8/19 10:45:34

argparse

argparse.add_argument 完全指南 🧱 基础篇：命令行参数解析入门 1. 模块初始化 import argparse# 创建参数解析器（所有操作的基础容器） parser argparse.ArgumentParser( progMyApp, # 程序名称（默认从sys.argv[0]…...

编程日记 2025/8/21 12:19:39

力扣-hot100（移动零）

283. 移动零简单给定一个数组 nums，编写一个函数将所有 0 移动到数组的末尾，同时保持非零元素的相对顺序。请注意 ，必须在不复制数组的情况下原地对数组进行操作。示例 1: 输入: nums [0,1,0,3,12] 输出: [1,3,12,0,0] 示例 2: 输…...

编程日记 2025/8/22 11:18:01

优先级队列的实模拟实现

优先级队列底层默认用的是vector来存储数据，实现了类似我们数据结构中学习过的堆的队列，他的插入和删除都是优先级高先插入和删除。下面我们来模拟实现它们常见的接口来熟悉优先级队列。仿函数在介绍优先级队列之前，我们先熟悉一个概念&a…...

编程日记 2025/8/22 23:16:54

ES6的`class`中，`super`关键字在构造函数和非构造函数中的行为有何不同？

在 ES6 的 class 中，super 关键字的行为在构造函数和非构造函数（普通方法） 中有显著区别，主要体现在以下方面： 1. 构造函数中的 super 行为规则必须显式调用： 在子类的构造函数中，必须先调…...

编程日记 2025/8/22 23:13:28

从 BI 与 SQL2API 的差异，看数据技术的多元发展路径

在数据驱动的商业世界里，商业智能（BI）与 SQL2API 如同两颗闪耀的星星，各自散发着独特的光芒。BI 早已在企业中广泛应用，成为数据分析领域的中流砥柱；而 SQL2API 作为新兴技术，虽潜力巨大&#x…...

编程日记 2025/8/22 23:16:55

UNet脑瘤医学影像分割训练实战（PyTorch 完整代码）

UNet是一种基于卷积神经网络（CNN）的医学影像分割模型，由Ronneberger等人于2015年提出。本文我们将简要介绍基于PyTorch框架，使用UNet模型在脑瘤医学影像分割数据集上进行训练，同时通过SwanLab监控训练过程，…...

编程日记 2025/8/21 10:11:07

MySQL事务隔离级别详解

MySQL事务隔离级别详解 1. 基本概念 1.1 什么是事务隔离级别？ 事务隔离级别是数据库管理系统为了保证数据一致性，在多个事务并发访问时提供的不同级别的保护机制。 1.2 事务并发问题脏读（Dirty Read）： 一个事务读…...

编程日记 2025/8/22 23:16:20

2025年K8s最新高频面试题

目录 Kubernetes的核心组件有哪些，各自作用是什么？ Pod和Deployment的区别？ Service有哪些类型，分别适用于什么场景？ ConfigMap和Secret有什么区别？ StatefulSet 和 Deployment 的主要区别是什么？什么是 Ingress，有哪些常用实现方式? 如何限制 Kubernetes 中 Pod …...

编程日记 2025/8/22 23:16:56

CobaltStrike

概述 Cobalt Strike是⼀款基于java的渗透测试神器，常被业界⼈称为CS神器。⾃3.0以后已经不在使用 Metasploit框架⽽作为⼀个独⽴的平台使用，分为客户端与服务端，服务端是⼀个，客户端可以有多个，⾮常适合团队协同作战…...

编程日记 2025/8/19 23:00:46

Web前端（CSS篇）

什么是CSS？ css(Cascading Style Sheets)是层叠样式表或级联样式表，是一组设置规则，用于控制web页面外观。为什么使用CSS? CSS 用于定义网页的样式，包括针对不同设备和屏幕尺寸的设计和布局。 CSS 实例 body {background-col…...

编程日记 2025/8/20 16:05:13

回归测试中常见的问题：如何避免“越改越错“的陷阱

修复一个Bug，引入三个新Bug "我们只是改了个小功能，为什么整个系统都出问题了？"——这是回归测试失败的典型症状。据IBM研究显示，约40%的线上缺陷源自不充分的回归测试。本文将深入剖析回归测试中的常见陷阱&#xff0…...

编程日记 2025/8/21 5:32:07

红宝书第四十六讲：Node.js基础与API设计解析

红宝书第四十六讲：Node.js基础与API设计解析资料取自《JavaScript高级程序设计（第5版）》。查看总目录：红宝书学习大纲一、Node.js基础概念 1. 流（Streams）的核心地位 12 Node.js的文件读写和网络通信依…...

编程日记 2025/8/21 19:22:42

IT运维常用的软件工具有哪些

IT运维常用的软件工具主要包括：监控工具、自动化运维工具、日志管理工具、网络管理工具、资产管理工具、服务台工具。这些工具分别用于保障IT系统稳定运行、提升运维效率、快速响应故障。其中，监控工具至关重要，它能实时监测系统运行状态、资…...

编程日记 2025/8/17 8:52:52

eplan许可证迁移到其他计算机

随着电气设计项目的不断扩大和变更，您可能需要将EPLAN许可证从一台计算机迁移到另一台计算机上。然而，在迁移过程中，确保您的软件始终保持最佳状态至关重要。本文将为您提供一份详尽的EPLAN许可证迁移指南，帮助您轻松完成这一操作…...

编程日记 2025/8/19 21:57:32

服务器部署静态页面

前言需要先下载nginx，然后上传你的静态网页文件，最后设置nginx展示静态页面安装nginx 第一步：在服务器上下载nginx服务 sudo dnf install nginx 第二步：启动nginx sudo systemctl start nginx 第三步：验证ngin…...

编程日记 2025/8/16 19:10:23

Spring boot 知识整理

一、SpringBoot 背景内容梳理 SpringBoot是一个基于Spring框架的开源框架，用于简化Spring应用程序的初始搭建和开发过程。它通过提供约定优于配置的方式，尽可能减少开发者的工作量，使得开发Spring应用变得更加快速、便捷和高效。 SpringBoot…...

编程日记 2025/8/22 5:07:10

软件测试面试题汇总---实时更新

1. java垃圾回收机制 2. 类为什么不能多继承，而接口可以参考为什么类之间只能单继承不能多继承，接口之间可以多继承，类与接口之间可以多实现_内部可以多继承而接口可以多实现-CSDN博客 3. java面向对象的三大特性继承、封装、多态 4. …...

编程日记 2025/8/21 21:29:43

2025海外代理IP测评：Bright Data，ipfoxy，smartproxy，ipipgo，kookeey，ipidea哪个值得推荐？

近年来，随着全球化和跨境业务需求的不断扩大“海外代理IP”逐渐成为企业和个人在多样化场景中的重要工具。无论是进行数据采集、广告验证、社交媒体管理，还是跨境电商平台运营，选择合适的代理IP服务商都显得尤为重要。然而，市场上…...

编程日记 2025/8/19 17:04:33

蓝桥杯 8. 分巧克力

分巧克力原题目链接问题描述儿童节那天有 K 位小朋友到小明家做客。小明拿出了珍藏的巧克力招待小朋友们。小明一共有 N 块巧克力，其中第 i 块是 Hᵢ Wᵢ 的长方形。为了公平起见，小明需要从这 N 块巧克力中切出 K 块巧克力分给小朋友们。要求…...

编程日记 2025/8/17 18:28:45

计算机组成原理—————计算机运算方法精讲＜3＞反码及移码的表示

第一部分：反码表示法这里我们直接给出整数反码的计算公式我们实际计算中其实不用死记硬背公式，小编在这里介绍一下求反码的秒杀技反码秒杀技：定号取反第一步：确定符号位是0还是1 第二步：符号位不变&#xff0c…...

编程日记 2025/8/21 2:13:52

关于STM32创建工程文件启动文件选择

注意启动文件只要选择这几个而不是要把所有都选上...

编程日记 2025/8/21 16:09:22

FC-4 mapping映射协议VI、hippi、fhcp、scma表示啥意思

FC-4 mapping映射协议VI、hippi、fhcp、scma表示啥意思 1.FC-4 Upper layer protocol协议映射层，定义了光纤通道和上层应用，包括FPGA/ARM 或者其他上层应用之间的接口。上层应用协议包括：串行scsi协议，fcp-scsi协议， f…...

编程日记 2025/8/20 16:59:06

15、stack、queue、deque的模拟实现

一、stack 1、stack的使用请看这篇文章 2、stack的原理这篇文章的栈原理讲的不错，并且有链式栈和顺序栈的创建，还有栈常使用的场景，没有数据结构基础的可以看，并且实现一下他的2种栈。 3、stack的实现 3.1、成员变量这里…...

编程日记 2025/8/19 2:47:07

GR00T N1：面向通用类人机器人的开放基础模型

摘要通用型机器人需要具备多功能的身体和智能的大脑。近年来，类人机器人的发展在构建人类世界中的通用自主性硬件平台方面展现出巨大潜力。一个经过大量多样化数据源训练的机器人基础模型，对于使机器人能够推理新情况、稳健处理现实世界的多变性以及快…...

编程日记 2025/8/19 9:39:30

保姆级教程：RK3588部署yolo目标检测模型

本文用到的板卡设备为鲁班猫4（LubanCat-4），瑞芯微rk3588系列处理器。官方文档写的挺详细了，但是版本太多不统一，而且涉及了多个代码仓库，稍显杂乱。本着最少代码原则，仅需下载一个代码仓库&am…...

编程日记 2025/8/22 8:04:46

【含文档+PPT+源码】物联网车辆GPS定位管理系统【

项目视频介绍： 毕业作品物联台云平台的设计与实现课程简介： 本课程演示的是一款物联网车辆GPS定位管理系统，主要针对计算机相关专业的正在做毕设的学生与需要项目实战练习的 Java 学习者。 1.包含：项目源码、项目文档、数据库脚…...

编程日记 2025/8/21 4:32:03

热烈祝贺“中芯机械”选择使用订单日记

感谢潍坊中芯机械制造有限公司选择使用订单日记！ 潍坊中芯机械制造有限公司，成立于2023年，位于山东省潍坊市，是一家以从事生产、销售农业机械、汽车配件、机械电气设备等业务为主的企业。在业务不断壮大的过程中，想…...

编程日记 2025/8/19 23:18:47

2025年保安员考试题库及答案

一、单选题 81、保安员张某和李某在火车站巡逻时，发现一男青年神色慌张，行为诡秘，这两名保安员识别这一可疑情况使用的方法是（）。 A.查问法 B.直接观察法 C.判断法 D.视觉判断法答案：B 82、某天&…...

编程日记 2025/8/19 16:17:48

ADB的安装及抓取日志（1）

一、简介 ADB（Android Debug Bridge）是一个通用命令行工具，允许你与 Android 设备进行通信。它主要用于开发和调试目的，但也可用于其他多种功能，如安装应用、运行 shell 命令、查看日志等。ADB 是 Android SDK 的一部…...

编程日记 2025/8/20 22:23:57

用 Iris数据做决策树分析

文章目录 Iris数据的准备1.直接从sklearn.datasets 加载或转化成文件已备本地使用2.可以在https://archive.ics.uci.edu/dataset/53/iris下载过程示例代码如下生成的决策树如下：生成的分析报告如下： 决策树模型分析报告1. 模型性能2. 特征重要性3. 决策…...

编程日记 2025/8/18 13:56:45

【Bluedroid】A2DP Sink播放流程源码分析(三)

AVCTP消息处理 avrc_msg_cback /packages/modules/Bluetooth/system/stack/avrc/avrc_api.cc /******************************************************************************** Function avrc_msg_cback** Description This is the callback function used…...

编程日记 2025/8/19 19:08:59

概念实践极速入门 - 常用的设计模式 - 简单生活例子

概念实践极速入门 - 常用的设计模式 - 简单生活例子 SOLID 五大设计原则的首字母缩写单一职责原则和开闭原则就省略啦, 这两个概念很简单, 为了写而写反而容易误导人~* 鼓励大家字面理解！ // 哎呀还是解释吧单一(S): 单干一件事; 开闭(O): 拓展开放, 修改关…...

编程日记 2025/8/17 19:51:32

postgres 数据库信息解读与 sqlshell常用指令介绍

数据库信息： sqlshell Server [localhost]: 192.168.30.101 Database [postgres]: Port [5432]: 5432 Username [postgres]: 用户 postgres 的口令： psql (15.12, 服务器 16.8 (Debian 16.8-1.pgdg1201)) 警告：psql 主版本15,服务器主版本为…...

编程日记 2025/8/19 1:22:10

映射网络路路径和ftp路径原理是什么，如何使用，有什么区别

文章目录一、原理1. 映射网络路径2. FTP路径二、使用方法1. 映射网络路径2. FTP路径三、主要区别1. 协议与功能2. 安全性与权限3. 适用场景四、如何选择？五、注意事项映射网络路径（如SMB/CIFS或NFS）和FTP路径（FTP/FTPS/SFTP&…...

编程日记 2025/8/19 4:36:44

微服务3--服务容错

前言：本篇主要介绍服务容错与Sentinel进行限流。高并发带来的问题在微服务架构中，我们将业务拆分为一个个的服务，服务与服务之间都可以相互调用，但是由于网络或者说服务器本身的问题，服务不能保证100%可用&#xff…...

编程日记 2025/8/20 3:57:02

4.15redis点评项目下

--->接redis点评项目上 Redis优化秒杀方案下单流程为：用户请求nginx--->访问tomcat--->查询优惠券--->判断秒杀库存是否足够--->查询订单--->校验是否是一人一单--->扣减库存--->创建订单以上流程如果要串行执行耗时会很多&#xff0c…...

编程日记 2025/8/21 9:01:14

Web开发-JavaEE应用原生和FastJson反序列化URLDNS链JDBC链Gadget手搓

知识点： 1、安全开发-JavaEE-原生序列化-URLDNS链分析 2、安全开发-JavaEE-FastJson-JdbcRowSetImpl链分析利用链也叫"gadget chains"，我们通常称为gadget： 1、共同条件：实现Serializable或者Externalizable接口&…...

编程日记 2025/8/19 6:00:28

坚持每日Codeforces三题挑战：Day 3 - 题目详解（2024-04-16，难度：900, 1200, 1200）

每天坚持写三道题第三天 （今天写点简单的，剩下去刷力扣了） 今日题目: Problem - B - Codeforces 900 Problem - B - Codeforces 1300 Problem - D - Codeforces 1400 题目一: Problem - B - Codeforces 题目大意: 给你一个数组,每次操…...

编程日记 2025/8/20 13:06:47

MySQL5.7递归查询

向下递归查询 SELECT ID,NAME,PARENT_ID,LEVEL_FROM(SELECT ID AS _IDS,(SELECT ID : GROUP_CONCAT(ID)FROM TREE_TABLE WHERE FIND_IN_SET(PARENT_ID,ID) > 0AND REMOVE N) T1,L : L 1 AS LEVEL_FROM TREE_TABLE,(SELECT ID : start, L: 0) T2WHERE ID IS NOT NULL) T3,…...

编程日记 2025/8/17 18:29:06

半导体设备通信标准—secsgem v0.3.0版本使用说明文档(2)之GEM(SEMI 30)

文章目录 1、处理器1.1、事件 2、GEM 合规性2.1、状态模型2.2、设备加工状态2.3、文档2.4、控制 （作员启动）2.5、动态事件报告配置2.6、跟踪数据收集2.7、报警管理2.8、远程控制2.9、设备常量2.10、工艺配方管理2.11、物料移动2.12、设备终端…...

编程日记 2025/8/17 21:32:38

C++异步编程从入门到精通实战：全面指南与实战案例

C异步编程从入门到精通实战：全面指南与实战案例在当今多核处理器普及的时代，异步编程成为了提升程序性能和响应能力的关键技术。无论是在高频交易系统、实时游戏引擎，还是网络服务器和大型数据处理平台，异步编程都发挥着至关重要…...

编程日记 2025/8/17 18:29:27

目录