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

Vue3 模板引用：打破数据驱动的次元壁（附高阶玩法）

news 来源：原创 2025/8/21 11:30:09

在数据驱动的Vue世界中，模板引用（Template Refs）是我们与真实DOM对话的秘密通道。本文将带你深入理解这个"逃生舱"的正确打开方式，并分享实战中的高阶技巧。

一、基础入门：建立DOM连接

1. 创建模板引用
<template><!-- 绑定ref属性 --><input ref="usernameInput" type="text"><ChildComponent ref="childRef" />
</template><script setup>
import { ref, onMounted } from 'vue'// 声明与模板中同名的ref
const usernameInput = ref(null)
const childRef = ref(null)onMounted(() => {usernameInput.value.focus() // 自动聚焦输入框console.log(childRef.value) // 子组件实例
})
</script>

核心要点：

  • 通过ref属性建立绑定

  • 访问时机：组件挂载后才能获取引用

  • 引用类型：

    • DOM元素：返回Element对象

    • 组件：返回组件实例

2. 组合式API最佳实践
// 动态引用示例
<template><div v-for="item in list" :ref="setItemRef"></div>
</template><script setup>
const itemRefs = ref([])
const setItemRef = el => {if (el) itemRefs.value.push(el)
}
</script>

二、进阶技巧：解锁高阶玩法

1. 组件通信的精准控制
// 子组件明确暴露接口
<script setup>
defineExpose({validate: () => { /* 校验逻辑 */ },reset: () => { /* 重置表单 */ }
})
</script>// 父组件安全调用
childRef.value.validate()
2. 动态引用管理方案
// 方案一：函数式引用（响应式数组）
const dynamicRefs = ref([])
const setDynamicRef = (el) => {if (el) dynamicRefs.value.push(el)
}// 方案二：使用WeakMap维护引用
const refMap = new WeakMap()
<template><div v-for="item in list" :ref="el => refMap.set(item.id, el)">
</template>
3. TypeScript增强类型提示
// 组件实例类型声明
import ChildComponent from './ChildComponent.vue'const childRef = ref<InstanceType<typeof ChildComponent>>()
childRef.value?.exposedMethod() // 安全调用

三、性能优化：避免引用陷阱

  1. 引用缓存策略
    避免在渲染函数中创建新函数：

// 错误示例 ❌
<template><div :ref="el => { /* 每次渲染新建函数 */ }">
</template>// 正确示例 ✅
const getRef = useMemoizedRef()

  1. 高效事件监听
    优先使用Vue事件系统：

// 优于直接使用addEventListener
<input @keyup.enter="submitForm">

  1. 虚拟滚动优化
    结合<Teleport>与引用池管理：

// 长列表优化示例
const activeRefs = new Set()
const reuseRef = (el) => {if (el && !activeRefs.has(el)) {initElement(el)activeRefs.add(el)}
}

四、实战场景解析

案例1：表单自动聚焦
// 自定义指令封装
const vAutoFocus = {mounted: (el) => el.focus()
}// 使用方式
<input v-auto-focus>
案例2：响应式尺寸追踪
// 结合ResizeObserver
const observeSize = (el, callback) => {const observer = new ResizeObserver(entries => {callback(entries[0].contentRect)})observer.observe(el)return () => observer.disconnect()
}// 组件内使用
onMounted(() => {observeSize(containerRef.value, (rect) => {console.log('尺寸变化:', rect)})
})
案例3：第三方库集成
// 图表库初始化
const initChart = (el) => {const chart = echarts.init(el)// 维护实例引用onUnmounted(() => chart.dispose())return chart
}// 使用方式
const chartRef = ref()
watchEffect(() => {if (chartRef.value) {const chart = initChart(chartRef.value)chart.setOption(options.value)}
})

五、避坑指南：常见问题解析

问题现象解决方案
ref.value为null检查生命周期阶段，确保在onMounted后访问
内存泄漏及时清理事件监听和Observer
类型提示缺失使用InstanceType声明组件类型
动态列表引用丢失采用WeakMap或唯一标识管理
组件方法调用报错检查defineExpose暴露情况

六、设计哲学：何时使用模板引用？

适用场景：

  • 集成传统DOM库（如jQuery插件）

  • 管理焦点/媒体播放等原生行为

  • 需要直接测量DOM元素

  • 实现复杂动画效果

慎用场景：

  • 表单状态管理（优先使用v-model）

  • 样式控制（优先使用class/style绑定）

  • 简单交互逻辑（优先使用事件系统）

七、总结

模板引用是Vue响应式世界的逃生舱口，使用时需要牢记：

  1. 保持克制：90%的场景应优先使用数据驱动

  2. 明确生命周期：确保访问引用的时机正确

  3. 类型安全：使用TypeScript增强可维护性

  4. 资源管理：及时清理监听器和观察者

  5. 组件规范：通过defineExpose建立清晰接口

思考题：当需要实现一个跟随页面滚动的悬浮按钮时，应该如何使用模板引用结合Intersection Observer API来实现性能最优解？

通过合理运用模板引用，我们既能享受Vue响应式的便利，也能在必要时突破次元壁，实现更底层的交互控制。记住：能力越大，责任越大！

如果对你有帮助，请帮忙点个赞。

相关文章：

Vue3 模板引用：打破数据驱动的次元壁（附高阶玩法）

在数据驱动的Vue世界中&#xff0c;模板引用&#xff08;Template Refs&#xff09;是我们与真实DOM对话的秘密通道。本文将带你深入理解这个"逃生舱"的正确打开方式&#xff0c;并分享实战中的高阶技巧。 一、基础入门&#xff1a;建立DOM连接 1. 创建模板引用 &…...

编程日记 2025/8/21 11:30:09

第五天 Labview数据记录（5.5 SQL数据库读写）

5.5 SQL数据库读写 SQL 数据库读写操作是现代软件开发、数据分析和企业信息系统的核心功能。其意义不仅体现在技术层面&#xff0c;还涉及到业务流程优化、数据管理、决策支持等多个方面。以下是 SQL 数据库读写操作的重要意义&#xff1a;1. 数据存储与管理&#xff1b;2. 支…...

编程日记 2025/8/21 11:22:44

微信小程序项目引入图片问题：Error: module ‘assets/img/topImg.jpg.js‘ is not defined

问题与处理策略 问题描述 在微信小程序项目中&#xff0c;通过 require 引入图片文件&#xff0c;报如下错误 Error: module assets/img/topImg.jpg.js is not defined, require args is ../../assets/img/topImg.jpg# 翻译错误&#xff1a;未定义模块“assets/img/topImg.…...

编程日记 2025/8/21 11:27:59

02C#基本结构篇（D4_注释-访问修饰符-标识符-关键字-运算符-流程控制语句）

目录 一、注释 1. 单行注释 2. 多行注释 3. XML文档注释 4. 使用建议和最佳实践&#xff1a; 二、访问修饰符 1. public 2. private 3. protected 4. internal 5. protected internal 或 protected and internal 6. private protected 或 private and protected 7.…...

编程日记 2025/8/21 11:15:14

Python：正则表达式

正则表达式的基础和应用 一、正则表达式核心语法&#xff08;四大基石&#xff09; 1. ​元字符&#xff08;特殊符号&#xff09;​ ​定位符 ^&#xff1a;匹配字符串开始位置 $&#xff1a;匹配字符串结束位置 \b&#xff1a;匹配单词边界​&#xff08;如 \bword\b 匹配…...

编程日记 2025/8/21 11:26:27

ChatGPT4.5详细介绍和API调用详细教程

OpenAI在2月27日发布GPT-4.5的研究预览版——这是迄今为止OpenAI最强大、最出色的聊天模型。GPT-4.5在扩大预训练和微调规模方面迈出了重要的一步。通过扩大无监督学习的规模&#xff0c;GPT-4.5提升了识别内容中的模式、建立内容关联和生成对于内容的见解的能力&#xff0c;但…...

编程日记 2025/8/21 10:54:27

linux makefile tutorial

一个makefile的教程&#xff0c;几个小时就能看完&#xff0c;对makefile有个总体加细节的系统了解&#xff0c;非常不错&#xff1a; Learn Makefiles With the tastiest examples 中文翻译版&#xff1a; 起步 - Makefile 教程 (gavinliu6.github.io) gcc官网手册&#x…...

编程日记 2025/8/21 10:54:28

学习C2CRS Ⅲ (Response Generation Module)

代码地址：https://github.com/RUCAIBox/WSDM2022-C2CRS 论文地址：https://arxiv.org/abs/2201.02732 CFSelectionConvModel模型结构与功能 CFSelectionConvModel 是一个用于对话推荐系统的端到端模型，结合了知识图谱（KG）、评论信息和对话上下文来生成对话响应。它通过以…...

编程日记 2025/8/21 10:56:00

SpringBoot全栈开发：从数据库到Markdown文件导出的终极实践指南

一、SpringBoot后端核心实现 1.1 数据库数据转MD文件 通过SpringBoot实现数据库内容导出为Markdown文件&#xff0c;是文档自动化生成的关键技术&#xff1a; GetMapping("/download") public void exportMd(HttpServletResponse response, Integer id) {Content …...

编程日记 2025/8/20 11:58:57

go函数详解

1.简介 函数是组织好的、可重复使用的&#xff0c;用于执行指定任务的代码块&#xff0c;为了完成某一个功能的程序指令的集合&#xff0c;称为函数。go语言中支持&#xff1a;函数、匿名函数和闭包。 2.函数的定义 func 函数名 (形参列表) (返回值列表){ 函数体 return …...

编程日记 2025/8/21 11:19:13

MVCC实现原理

一、引言 在现代数据库管理系统中&#xff0c;数据的一致性和并发性是两个至关重要的特性。传统的锁机制虽然有效&#xff0c;但也存在着性能瓶颈&#xff0c;特别是在高并发环境下&#xff0c;锁的争用会导致系统响应时间变慢&#xff0c;甚至引发死锁等问题。为了克服这些挑…...

编程日记 2025/8/21 11:27:59

通过Golang的container/list实现LRU缓存算法

文章目录 力扣&#xff1a;146. LRU 缓存主要结构 List 和 Element常用方法1. 初始化链表2. 插入元素3. 删除元素4. 遍历链表5. 获取链表长度使用场景注意事项 源代码阅读 在 Go 语言中&#xff0c;container/list 包提供了一个双向链表的实现。链表是一种常见的数据结构&#…...

编程日记 2025/8/21 11:19:14

网络编程7天学java

* 网络编程&#xff1a;两台或两台以上的主机构成一个网络 * IP地址&#xff1a;标志网络中的一个通信实体的地址 * 端口号&#xff1a;区分不同应用程序 * 网络通信协议&#xff1a;ISO参考模型&#xff08;7层&#xff09;&#xff0c;TCP/IP协议&#xff08;4层&#xff09;…...

编程日记 2025/8/21 11:20:41

在 IntelliJ IDEA 中配置 Git

1. 确保已安装 Git 在配置之前&#xff0c;确保你的系统已经安装了 Git。 检查是否已安装 Git&#xff1a; bash 复制 git --version 如果未安装&#xff0c;请前往 Git 官网 下载并安装。 2. 在 IntelliJ IDEA 中配置 Git 打开 IntelliJ IDEA。 进入设置&#xff1a; Windo…...

编程日记 2025/8/21 1:31:50

【Godot4.4】Rect2总结

概述 Rect2是2D场景中比较重要的一种数据类型。 Rect2的本质含义是2D场景的轴对齐包围盒&#xff0c;而不是可以自由变换的矩形。 Rect2提供了一些方法&#xff0c;可以方便的判断Rect2之间是否重叠、包含等&#xff0c;并可以获得重叠的区域。也可以获得两个Rect2的包围盒。…...

编程日记 2025/8/21 10:55:59

git使用命令总结

文章目录 Git 复制创建提交步骤Git 全局设置:创建 git 仓库:已有仓库? 遇到问题解决办法&#xff1a;问题一先git pull一下&#xff0c;具体流程为以下几步&#xff1a; 详细步骤 Git 复制 git clone -b RobotModelSetting/develop https://gitlab.123/PROJECT/123.git创建提…...

编程日记 2025/8/21 11:17:05

Unity DOTS从入门到精通之 C# Job System

文章目录 前言安装 DOTS 包C# 任务系统Mono 环境DOTS 环境运行作业NativeContainer 前言 作为 DOTS 教程&#xff0c;我们将创建一个旋转立方体的简单程序&#xff0c;并将传统的 Unity 设计转换为 DOTS 设计。 Unity 2022.3.52f1Entities 1.3.10 安装 DOTS 包 要安装 DOTS…...

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

linux下的网络抓包(tcpdump)介绍

linux下的网络抓包[tcpdump]介绍 前言tcpdump1. 安装 tcpdump2. 基本抓包命令3. 过滤器使用4. 保存捕获的数据包 异常指标1. 连接建立与断开相关指标异常 SYN 包异常 FIN 或 RST 包 2. 流量相关指标异常流量峰值异常源或目的 IP 流量 3. 端口相关指标异常端口使用端口扫描 4. 数…...

编程日记 2025/8/21 11:17:06

深入理解 Linux 中的 -h 选项：让命令输出更“人性化”

在 Linux 系统中&#xff0c;命令行工具是系统管理员和普通用户最常用的交互方式之一。然而&#xff0c;命令行输出往往充满了技术性术语和数字&#xff0c;对于初学者或非技术用户来说可能显得晦涩难懂。幸运的是&#xff0c;许多 Linux 命令都提供了一个非常实用的选项&#…...

编程日记 2025/8/16 12:55:12

selenium的鼠标操作

1、鼠标操作 鼠标时间对应的方法在那个类中&#xff1f; ​ ActionChains类,实例化 鼠标对象 1、context_click(element) # 右击 2、double_click(element) #双击 3、double_and_drop(source, target) # 拖拽 4、move_to_element(element) # 悬停 【重点】 5、perform() …...

编程日记 2025/8/21 11:26:29

STM32——GPIO介绍

GPIO（General-Purpose IO ports，通用输入/输出接口）模块是STM32的外设接口的核心部分，用于感知外界信号（输入模式）和控制外部设备（输出模式），支持多种工作模式和配置选项。 1、GPIO 基本结构 STM32F407 的每个 GPIO 引脚均可独立配置，主要特性包括： 9 组 GPIO 端口…...

编程日记 2025/8/21 7:02:47

Word 小黑第15套

对应大猫16 修改样式集 导航 -查找 第一章标题不显示 再选中文字 点击标题一 修改标题格式 格式 -段落 -换行和分页 勾选与下段同页 添加脚注 &#xff08;脚注默认位于底部 &#xff09;在脚注插入文档属性&#xff1a; -插入 -文档部件 -域 类别选择文档信息&#xff0c;域…...

编程日记 2025/8/21 4:28:02

linux自启动服务

在Linux环境中&#xff0c;systemd是一个系统和服务管理器&#xff0c;它为每个服务使用.service文件进行配置。systemctl是用于控制系统服务的主要工具。本文将详细介绍如何使用systemctl来管理vsftpd服务&#xff0c;以及如何设置服务自启动。 使用Systemd设置自启动服务 创…...

编程日记 2025/8/21 10:57:24

react使用拖拽，缩放组件，采用react-rnd解决 -完整版

屏幕录制2025-03-10 10.16.06 以下代码仅提供左侧可视化区域 右侧数据根据你们的存储数据来 大家直接看Rnd标签设置的属性即可&#xff01;&#xff01;&#xff01;&#xff01;&#xff01; /*** 用户拖拽水印的最终位置信息*/ export interface ProductWatermarkValue {wat…...

编程日记 2025/8/21 11:17:05

通过 ElasticSearch的Python API和`curl` 命令获取Elasticsearch 所有索引名称

导言 在大数据管理和实时搜索场景中&#xff0c;Elasticsearch 是一款不可或缺的工具。无论是开发调试、数据维护&#xff0c;还是系统监控&#xff0c;快速列出所有索引名称都是一个高频需求。本文将手把手教你如何通过 Python 客户端连接 Elasticsearch&#xff0c;并用两种方…...

编程日记 2025/8/21 6:41:45

Flutter：StatelessWidget vs StatefulWidget 深度解析

目录 1. 引言 2. StatelessWidget&#xff08;无状态组件&#xff09; 2.1 定义与特点 2.2 代码示例 3. StatefulWidget&#xff08;有状态组件&#xff09; 3.1 定义与特点 3.2 代码示例 4. StatelessWidget vs StatefulWidget 对比 5. StatefulWidget 生命周期 5.1…...

编程日记 2025/8/21 11:15:13

[密码学实战]Java实现国密TLSv1.3单向认证

一、代码运行结果 1.1 运行环境 1.2 运行结果 1.3 项目架构 二、TLS 协议基础与国密背景 2.1 TLS 协议的核心作用 TLS（Transport Layer Security） 是保障网络通信安全的加密协议，位于 TCP/IP 协议栈的应用层和传输层之间，提供： • 数据机密性：通过对称加密算法（如 AE…...

编程日记 2025/8/16 9:54:15

蓝桥杯省赛真题C++B组2024-握手问题

一、题目 【问题描述】 小蓝组织了一场算法交流会议&#xff0c;总共有 50 人参加了本次会议。在会议上&#xff0c;大家进行了握手交流。按照惯例他们每个人都要与除自己以外的其他所有人进行一次握手(且仅有一次)。但有 7 个人&#xff0c;这 7 人彼此之间没有进行握手(但这…...

编程日记 2025/8/20 17:07:09

项目实操分享：一个基于 Flask 的音乐生成系统，能够根据用户指定的参数自动生成 MIDI 音乐并转换为音频文件

在线体验音乐创作&#xff1a;AI Music Creator - AI Music Creator 体验者账号密码admin/admin123 系统架构 1.1 核心组件 MusicGenerator 类 负责音乐生成的核心逻辑 包含 MIDI 生成和音频转换功能 管理音乐参数和音轨生成 FluidSynth 集成 用于 MIDI 到音频的转换 …...

编程日记 2025/8/16 12:36:57

Java开发者如何接入并使用DeepSeek

目录 一、准备工作 二、添加DeepSeek SDK依赖 三、初始化DeepSeek客户端 四、数据上传与查询 五、数据处理与分析 六、实际应用案例 七、总结 【博主推荐】&#xff1a;最近发现了一个超棒的人工智能学习网站&#xff0c;内容通俗易懂&#xff0c;风格风趣幽默&#xff…...

编程日记 2025/8/19 23:09:44

多方安全计算(MPC)电子拍卖系统

目录 一、前言二、多方安全计算(MPC)与电子拍卖系统概述2.1 多方安全计算(MPC)的基本概念2.2 电子拍卖系统背景与需求三、MPC电子拍卖系统设计原理3.1 系统总体架构3.2 电子拍卖中的安全协议3.3 数学与算法证明四、数据加解密模块设计五、GPU加速与系统性能优化六、GUI设计与系…...

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

【数据库系统概论】第十一章 并发控制

第十一章 并发控制 11.1 并发控制概述&#xff08;1&#xff09;丢失修改&#xff08;2&#xff09;不可重复读&#xff08;3&#xff09;读“脏”数据 11.2 封锁11.2.1 封锁的概念11.2.2 基本封锁类型&#xff08;1&#xff09;排它锁/X锁/写锁&#xff08;2&#xff09;共享锁…...

编程日记 2025/8/16 10:00:38

C语言_数据结构总结4：不带头结点的单链表

纯C语言代码&#xff0c;不涉及C 0. 结点结构 typedef int ElemType; typedef struct LNode { ElemType data; //数据域 struct LNode* next; //指针域 }LNode, * LinkList; 1. 初始化 不带头结点的初始化&#xff0c;即只需将头指针初始化为NULL即可 void Init…...

编程日记 2025/8/16 9:54:17

用CSS画一条0.5px的线

上次面试前端被问到了这个问题&#xff0c;感觉有点懵懵的&#xff0c;我就回答了一个scaleY(0.5),这个是真的没想到&#xff0c;希望有需要的朋友可以去看看。随便记住一种就行。 1.第一种方式&#xff1a;通过缩放1px的线条实现视觉上的0.5px效果&#xff0c;兼容性较好。 …...

编程日记 2025/8/18 21:36:49

知识库全链路交互逻辑

阶段顺序 URL输入 → 网络连接 → 前端请求 → 后端处理 → 数据库交互 → 数据返回 → 前端渲染 → 连接关闭 阶段1&#xff1a;用户输入URL 用户行为&#xff1a;在浏览器地址栏输入 https://knowledge.com/search?keyword金融趋势 ​浏览器动作&#xff1a; “浏览器解析U…...

编程日记 2025/8/20 2:11:14

BambuStudio学习笔记：Model

# Model.hpp 核心模型结构说明## 文件概述 该头文件定义了3D打印数据处理的核心数据结构&#xff0c;包含模型对象、体积、实例、材料等关键类。主要功能包括&#xff1a; - 三维模型数据存储与管理 - 模型变换操作&#xff08;平移/旋转/缩放&#xff09; - 打印参数配置 - 多…...

编程日记 2025/8/16 11:36:08

Spring （八）AOP-切面编程的使用

目录 实现步骤&#xff1a; 1 导入AOP依赖 2 编写切面Aspect 3 编写通知方法 4 指定切入点表达式 5 测试AOP动态织入 图示&#xff1a; 一 实现步骤&#xff1a; 1 导入AOP依赖 <!-- Spring Boot AOP依赖 --><dependency><groupId>org.springframewor…...

编程日记 2025/8/18 19:46:48

【Go每日一练】构建一个简单的用户信息管理系统

&#x1f47b;创作者&#xff1a;丶重明 &#x1f47b;创作时间&#xff1a;2025年3月7日 &#x1f47b;擅长领域&#xff1a;运维 目录 1.&#x1f636;‍&#x1f32b;️题目&#xff1a;简单的用户信息管理系统2.&#x1f636;‍&#x1f32b;️代码开发3.&#x1f636;‍&a…...

编程日记 2025/8/19 17:11:38

PathRAG：通过图剪枝的方法优化Graph-based RAG的性能方法浅析

PathRAG 也是一种新型 Graph-based RAG 方法&#xff0c;通过检索索引图中的关键关系路径&#xff0c;减少噪声并优化 LLM 提示。其核心创新在于基于流的剪枝算法和路径为基础的提示策略&#xff0c;特别适用于捕捉复杂数据集中的关系。&#xff08;其实可以看做相比GraphRAG假…...

编程日记 2025/8/17 16:42:53

ElementUI 级联选择器el-cascader启用选择任意一级选项，选中后关闭下拉框

1、启用选择任意一级选项 在 el-cascader 标签上加上配置项&#xff1a; :props"{ checkStrictly: true }"例如&#xff1a; <el-cascaderref"selectedArrRef"v-model"selectedArr":options"optionsList":props"{ checkStri…...

编程日记 2025/8/16 9:54:31

【软件逆向】QQ 连连看小游戏去广告与一键消除实现

目录 一、背景介绍 二、去广告实现 2.1 分析广告加载流程 2.2 逆向分析广告加载逻辑 2.3 去广告方案 三、一键消除外挂实现 3.1 分析游戏逻辑 3.2 编写外挂插件 3.3 注入外挂&#xff1a; 四、一键消除效果展示 五、额外扩展 一、背景介绍 QQ 连连看是一款经典的休闲…...

编程日记 2025/8/16 10:01:40

vue el-select 省市区三级联动 vue + element-ui使用第三方插件实现省市区三级联动

vue el-select 省市区三级联动 vue使用第三方插件实现省市区三级联动 网上找了好多教程，都是使用el-cascader级联选择器的省市区选择器，但是几乎没有三个单独的el-select的进行关联的三级省市联动组件效果 第一步:先安装省市区element-ui的插件 npm install element-china-a…...

编程日记 2025/8/21 2:53:06

【GPT入门】第8课 大语言模型的自洽性

【GPT入门】第8课 大语言模型的自洽性 1.自洽性概念2.代码&#xff08;观察执行结果&#xff09;3.自洽性核心思想 1.自洽性概念 大模型的自洽性&#xff08;self - consistency&#xff09;是指在推理阶段&#xff0c;大模型通过生成多个答案并选择出现频率最高的那个&#x…...

编程日记 2025/8/18 13:32:21

工程化与框架系列（28）--前端国际化实现

前端国际化实现 &#x1f30d; 引言 前端国际化&#xff08;i18n&#xff09;是现代Web应用中的重要组成部分&#xff0c;它能够让应用支持多语言和多地区的用户使用。本文将深入探讨前端国际化的实现方案和最佳实践&#xff0c;包括文本翻译、日期时间格式化、货币处理等方面…...

编程日记 2025/8/16 9:54:08

【阿里云】操作系统控制台操作体验与性能评测全解析

引言 在现代的云计算环境中&#xff0c;操作系统控制台是进行系统管理和运维的重要工具。它不仅帮助用户高效地管理云端资源&#xff0c;还提供了智能助手、系统诊断、性能观测等功能&#xff0c;能够提升操作系统的使用效率&#xff0c;增强用户的操作体验。本文简要介绍了操…...

编程日记 2025/8/19 2:33:14

面试之《IntersectionObserver的使用》

IntersectionObserver 是一个 Web API&#xff0c;用于异步观察目标元素与其祖先元素或顶级文档视口&#xff08;viewport&#xff09;交叉状态的变化。这在很多场景下非常有用&#xff0c;比如懒加载图片、实现无限滚动加载更多内容等。下面详细介绍它的使用方法。 基本原理 …...

编程日记 2025/8/19 10:08:05

在 Spring Boot 2.7.x 中引入 Kafka-0.9 的实践

文章目录 在 Spring Boot 2.7.x 中引入 Kafka-0.9 的实践一、下载 Kafka-0.9二、启动 Zookeeper 和 Kafka三、创建 Spring Boot 项目四、引入 kafka 依赖五、移除 Kafka 自动配置六、编写 Kafka 生产者6.1 Kafka配置类6.2 生产者监听类 七、编写Controller发送Kafka八、验证消费…...

编程日记 2025/8/15 18:39:40

【MACOS】用户数据过多

进入下面的路径下找到.Spotlight-V100文件夹 /System/Volumes/Data修改选线 通过终端权限不够 在finder中进行查看然后解锁 然后添加权限 使用代码查看存储数据。 diskutil apfs list...

编程日记 2025/8/17 21:25:58

鸿蒙系统中的持续部署

鸿蒙操作系统&#xff0c;作为一款面向未来的分布式操作系统&#xff0c;旨在为不同的设备提供统一的操作系统平台。它支持多种终端设备&#xff0c;包括但不限于智能手机、平板电脑、智能穿戴设备和物联网&#xff08;IoT&#xff09;设备等&#xff0c;并且能够实现跨平台的无…...

编程日记 2025/8/16 12:29:43

centos linux安装mysql8 重置密码 远程连接

1. 下载并安装 MySQL Yum 仓库 从 MySQL 官方网站下载并安装 Yum 仓库配置文件。 # 下载MySQL 8.0的Yum仓库包 wget https://dev.mysql.com/get/mysql80-community-release-el7-5.noarch.rpm # 安装Yum仓库包 sudo rpm -ivh mysql80-community-release-el7-5.noarch.rpm2. 启…...

编程日记 2025/8/16 10:00:48