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

Vue3 setup、计算属性、侦听器、响应式API

news 来源：原创 2025/7/2 3:04:17

一、setup

一、`setup` 函数基础

作用：组合式 API 的入口，用于定义响应式数据、方法和生命周期钩子

执行时机：在 beforeCreate 之前调用，此时组件实例尚未创建

基本结构：

export default {setup(props, context) {// 响应式数据// 方法定义// 生命周期钩子return {// 暴露给模板的内容}}
}

setup中访问this是undefined

二、核心参数解析

1. props 参数

props: {title: String
},
setup(props) {// 访问 propsconsole.log(props.title)// 不要直接解构 props！const { title } = toRefs(props) // 保持响应性
}

2. context 参数

包含三个重要属性：

setup(props, { attrs, slots, emit }) {// attrs: 非 props 的属性// slots: 插槽内容// emit: 触发自定义事件function handleClick() {emit('custom-event', payload)}
}

三、`<script setup>` 语法糖

更简洁的编译时语法（SFC 专用）：

基础用法

<script setup>
import { ref } from 'vue'const count = ref(0)
</script><template><button @click="count++">{{ count }}</button>
</template>

特性对比

特性	普通 setup	`<script setup>`
代码量	需要 return 暴露	自动暴露顶层绑定
TypeScript 支持	需要类型断言	更好的类型推断
组件注册	components 选项	自动注册
自定义指令	directives 选项	自动注册

二、computed（计算属性）

作用：创建依赖其他响应式数据的缓存计算结果

1. 基础用法

import { ref, computed } from 'vue'// 组合式 API
const count = ref(0)
const double = computed(() => count.value * 2)

2. 可写计算属性

const firstName = ref('John')
const lastName = ref('Doe')const fullName = computed({get: () => `${firstName.value} ${lastName.value}`,set: (newValue) => {[firstName.value, lastName.value] = newValue.split(' ')}
})// 修改计算属性
fullName.value = 'Jane Smith' // 自动触发 setter

3. 最佳实践

用于派生状态（如过滤列表、格式显示）
避免在计算属性中进行异步操作或副作用
复杂计算应拆分到独立函数中

三、watch（侦听器）

作用：观察特定数据源变化，执行副作用

1. 侦听 ref 对象

const count = ref(0)// 侦听 ref
watch(count, (newVal, oldVal) => {console.log(`从 ${oldVal} 变为 ${newVal}`)
})// 立即执行
watch(count, callback, { immediate: true })

2. 侦听 reactive 对象

const state = reactive({ user: { name: 'Alice' }
})// 需要函数返回具体值
watch(() => state.user.name,(newName) => {console.log('用户名变化:', newName)}
)// 深度侦听
watch(() => state.user,(newUser) => {console.log('用户对象深度变化:', newUser)},{ deep: true }
)

3. 多源侦听

watch([refA, () => objB.prop],([newA, newB], [oldA, oldB]) => {// 处理变化}
)

四、watchEffect（副作用侦听）

作用：立即执行函数，自动追踪依赖并响应变化

1. 基础用法

const count = ref(0)
const stop = watchEffect(() => {console.log('当前值:', count.value)// 自动追踪 count.value 作为依赖
})// 停止侦听
stop()

2. 副作用清理

watchEffect((onCleanup) => {const timer = setInterval(() => {console.log('定时器运行')}, 1000)onCleanup(() => {clearInterval(timer)})
})

3. 调试选项

watchEffect(() => { /* ... */ },{flush: 'post', // 回调在 DOM 更新后触发onTrack(e) { /* 调试依赖追踪 */ },onTrigger(e) { /* 调试依赖变化 */ }}
)

核心对比

特性	computed	watch	watchEffect
返回值	返回计算值	无返回值	无返回值
执行时机	惰性计算（依赖变化时）	惰性执行（依赖变化时）	立即执行 + 依赖变化时
主要用途	派生状态	响应特定数据变化	自动追踪依赖的副作用
访问旧值	不支持	支持	不支持
多源侦听	不支持	支持	自动处理多个依赖
性能优化	自动缓存	需要手动配置	自动依赖追踪

五、使用场景示例

1. 搜索过滤（computed）

const searchText = ref('')
const items = ref([/* ... */])const filteredItems = computed(() => {return items.value.filter(item => item.name.includes(searchText.value))
})

2. 路由参数变化（watch）

import { watch } from 'vue'
import { useRoute } from 'vue-router'const route = useRoute()watch(() => route.params.id,(newId) => {fetchData(newId)}
)

3. 自动保存（watchEffect）

const formData = reactive({ /* ... */ })// 任何字段修改后自动保存
const stopAutoSave = watchEffect(async () => {await api.saveDraft(formData)console.log('自动保存成功')
})// 组件卸载时停止
onUnmounted(stopAutoSave)

六、最佳实践

1. 优先选择

需要派生状态 → computed
需要旧值 → watch
多个依赖/自动追踪 → watchEffect

2. 性能优化

// 避免不必要的深度侦听
watch(() => ({ ...obj }), // 创建新对象触发变化(newObj) => { /* ... */ }
)// 限制执行频率
import { debounce } from 'lodash-es'
watch(value,debounce((newVal) => {// 处理逻辑}, 300)
)

3. 组合使用

// 复杂场景组合
const userId = ref(null)
const userData = ref(null)// 自动获取用户数据
watchEffect(() => {if (!userId.value) returnfetchUser(userId.value).then(data => {userData.value = data})
})// 手动刷新
const refreshUser = () => {// 通过修改依赖触发重新执行userId.value = userId.value 
}

七、常见问题

Q1: watch 和 watchEffect 如何选择？

需要明确知道哪些状态变化触发回调 → watch
依赖动态变化或需要自动追踪 → watchEffect

Q2: 为什么 computed 需要返回函数？

计算属性需要保持响应性，通过函数形式确保正确访问最新值

Q3: 如何停止侦听器？

// watch 返回停止函数
const stopWatch = watch(/* ... */)
stopWatch()// watchEffect 同理
const stopEffect = watchEffect(/* ... */)
stopEffect()

Q4: 如何处理异步操作？

// watch 中处理异步
watch(source,async (newVal, oldVal, onCleanup) => {let cancelled = falseonCleanup(() => { cancelled = true })const data = await fetchData(newVal)if (!cancelled) {// 处理数据}}
)

通过合理组合使用这些 API，可以实现高效、可维护的响应式逻辑。记住：

computed 用于派生数据
watch 用于精准控制侦听目标
watchEffect 用于自动追踪依赖的副作用

响应式API

一、核心 API 对比表

特性	ref	reactive	toRefs	toRef
适用类型	基本类型/对象	对象/数组	响应式对象	响应式对象的单个属性
访问方式	通过 `.value` 访问	直接访问属性	解构后仍保持响应式	通过 `.value` 访问
响应性保持	始终响应式	始终响应式	保持解构后的响应式	保持源属性的响应式连接
典型使用场景	独立基本值、模板引用、组件引用	复杂对象状态管理	解构响应式对象	将 props 属性转为响应式引用
类型推断	明确类型（Ref<T>）	深层响应式类型	将对象属性转为 Ref 类型	单个属性转为 Ref 类型

二、`ref` 与 `reactive` 深度解析

1. `ref` 最佳实践

import { ref } from 'vue'// 基本类型
const count = ref(0)
console.log(count.value) // 0// 引用类型（依然可用，但更推荐 reactive）
const user = ref({ name: 'Alice' })
console.log(user.value.name) // 'Alice'// 模板引用
const inputRef = ref(null)

使用场景：

独立的基本类型值（字符串、数字、布尔值）
需要重新赋值的对象（替换整个对象时保持响应性）
DOM 元素引用（结合模板中的 ref 属性）

2. `reactive` 最佳实践

import { reactive } from 'vue'const state = reactive({user: {name: 'Bob',age: 30},items: ['apple', 'banana']
})// 直接访问属性
state.user.name = 'Charlie'
state.items.push('orange')

使用场景：

需要深度嵌套的复杂对象
需要保持引用的数据结构（如数组、Map、Set）
逻辑相关的多个属性组合（如表单字段）

三、`toRefs` 与 `toRef` 核心差异

1. `toRefs` 使用示例

import { reactive, toRefs } from 'vue'const state = reactive({name: 'Eva',age: 25
})// 解构后保持响应性
const { name, age } = toRefs(state)name.value = 'David' // 修改会同步到源对象
console.log(state.name) // 'David'

核心特性：

转换整个响应式对象的所有属性为 ref
保持与源对象的响应式连接
常用于组合式函数返回值

2. `toRef` 使用示例

import { reactive, toRef } from 'vue'const state = reactive({ count: 0 })// 创建单个属性的 ref
const countRef = toRef(state, 'count')// 修改 ref 会同步源对象
countRef.value++
console.log(state.count) // 1

核心特性：

针对单个属性创建 ref
即使源属性不存在仍可创建（需第二个参数默认值）
常用于 props 属性转换

四、组合使用模式

1. 组合式函数中的标准模式

// useFeature.js
import { reactive, toRefs } from 'vue'export function useFeature() {const state = reactive({x: 0,y: 0})function update() {state.x = Math.random()state.y = Math.random()}return { ...toRefs(state), update }
}// 组件中使用
const { x, y, update } = useFeature()

2. Props 处理最佳实践

import { toRef } from 'vue'export default {props: ['userId'],setup(props) {// 保持响应性的正确方式const userId = toRef(props, 'userId')// 错误方式：直接解构会失去响应性// const { userId } = propsreturn { userId }}
}

五、常见问题解决方案

问题 1：如何选择 ref 和 reactive？

简单值 → ref
复杂对象 → reactive + toRefs
需要重新赋值的对象 → ref

问题 2：解构响应式对象失效怎么办？

使用 toRefs 包裹后再解构
直接操作原对象属性

问题 3：如何确保 props 的响应性？

使用 toRef(props, 'propName')
避免直接解构 props

六、TypeScript 类型处理技巧

1. `ref` 类型标注

const count = ref<number>(0) // Ref<number>
const user = ref<User>({ name: '' }) // Ref<User>

2. `reactive` 类型推断

interface State {name: stringage: number
}const state = reactive<State>({name: 'Alice',age: 25
})

3. `toRefs` 类型保留

const state = reactive({ x: 0, y: 0 })
const { x, y } = toRefs(state) // x: Ref<number>, y: Ref<number>

七、性能优化建议

避免深层嵌套：过度使用 reactive 会导致深层响应式代理影响性能
合理使用 shallowRef：对不需要深度监听的大对象使用 shallowRef

批量更新策略：

const state = reactive({ a: 1, b: 2 })// 推荐：单次修改多个属性
Object.assign(state, { a: 2, b: 3 })// 不推荐：多次触发更新
state.a = 2
state.b = 3

八、综合应用示例

<script setup>
import { reactive, ref, toRefs, toRef } from 'vue'// 基本类型使用 ref
const searchQuery = ref('')// 复杂对象使用 reactive
const pagination = reactive({page: 1,pageSize: 10,total: 0
})// 转换为 refs 供模板使用
const { page, pageSize } = toRefs(pagination)// props 处理
const props = defineProps(['initialData'])
const initialDataRef = toRef(props, 'initialData')// 方法
function nextPage() {pagination.page++
}
</script><template><input v-model="searchQuery"><div>当前页: {{ page }}每页数量: {{ pageSize }}</div><button @click="nextPage">下一页</button>
</template>

通过合理运用这些响应式 API，可以实现：

更清晰的代码结构
更好的类型推断（TypeScript）
更高效的响应式更新
更安全的 props 处理
更灵活的逻辑复用

记住黄金法则：
简单值用 ref，复杂对象用 reactive，解构对象用 toRefs，处理 props 用 toRef

Vue3 setup、计算属性、侦听器、响应式API

一、setup 一、setup 函数基础作用：组合式 API 的入口，用于定义响应式数据、方法和生命周期钩子执行时机：在 beforeCreate 之前调用，此时组件实例尚未创建基本结构： export default {setup(props, context) {/…...

编程日记 2025/7/2 3:04:17

从内核到应用层：深度剖析信号捕捉技术栈（含sigaction系统调用/SIGCHLD回收/volatile内存屏障）

Linux系列文章目录 Linux系列前言一、进程对信号的捕捉1.1 内核对信号的捕捉1.2 sigaction()函数1.3 信号集的修改时机二、可重入函数三、volatile关键字四、SIGCHLD信号前言 Linux系统中，信号捕捉是指进程可以通过设置信号处理函数来响应特定信号。通过信号捕捉…...

编程日记 2025/7/2 3:01:10

【KWDB 创作者计划】_嵌入式硬件篇---寄存器与存储器截断与溢出

文章目录前言一、寄存器与存储器1. 定义与基本概念寄存器（Register）位置功能特点存储器（Memory）位置功能特点2. 关键区别3. 层级关系与协作存储层次结构协作示例4. 为什么需要寄存器性能优化指令支持减少总线竞争5. 其他寄存器类型专用寄存器程序计数器（PC）栈指针（SP）…...

编程日记 2025/7/2 2:54:21

Python torchvision.datasets 下常用数据集配置和使用方法

torchvision.datasets 提供了许多常用的数据集类，以下是一些常用方法（datasets中有大量数据集处理方法，这里仅展示了部分数据集处理方法）及其实现类的介绍、用法和输入参数解释： CIFAR CIFAR10 ：包含 10 个…...

编程日记 2025/6/29 11:01:40

unity使用iTextSharp生成PDF文件

iTextSharp 可以在VS中工具下面得NuGet包管理器中下载 ，具体操作可以搜一下很多 ， 我直接把我得生成pdf代码附上我这个是生成我一个csv文件内容和图片 using System.IO; using UnityEngine; using iTextSharp.text; using iTextSharp.text.pdf; using…...

编程日记 2025/6/29 9:18:33

django admin 添加自定义页面

在Django中，你可以通过多种方式向Django Admin添加自定义页面。以下是一些常见的方法： 方法1：使用ModelAdmin的get_urls()方法如果你只是想添加一个简单的页面来展示信息，你可以在你的ModelAdmin类中重写get_urls()方法。 from…...

编程日记 2025/6/29 11:50:47

Java并发编程｜CompletableFuture原理与实战：从链式操作到异步编排

🔥 本文系统讲解Java并发编程核心类CompletableFuture，涵盖线程池配置策略、异步编程实践、异常处理机制等关键技术。通过电商订单系统与物流调度实战案例，深度解析：1）CompletableFuture链式操作与异步编排 2）多线程任务聚合与结果处理 3）生产级异常处理方案 4）组合操…...

编程日记 2025/6/29 12:02:11

动态自适应分区算法（DAPS）设计流程详解

动态自适应分区算法（Dynamic Adaptive Partitioning System, DAPS）是一种通过实时监测系统状态并动态调整资源分配策略的智能算法，广泛应用于缓存优化、分布式系统、工业制造等领域。本文将从设计流程的核心步骤出发，结合数学模型…...

编程日记 2025/6/29 9:18:49

优雅实现网页弹窗提示功能：JavaScript与CSS完美结合

在现代Web开发中，弹窗提示是提升用户体验的重要元素之一。本文将深入探讨如何实现一个优雅、可复用的弹窗提示系统，避免常见问题如重复触发、样式混乱等。核心代码解析 // 控制弹窗是否可以显示的标志 let alertStatus true;// 显示提示信息 functio…...

编程日记 2025/6/29 11:58:02

LeetCode-Hot100

数组 1.数组——最大子数组和解题思路：动态规划动态规划解决问题的步骤：1.理解题意。题目要求只返回结果，不要求得到最大的连续子数组的哪一个，这样的问题常常可以用动态规划。 2.定义子问题：eg：以 −…...

编程日记 2025/6/29 10:10:21

【Redis】有序集合类型Sortedset 常用命令详解

此类型和 set 一样也是 string 类型元素的集合，且不允许重复的元素不同的是每个元素都会关联一个double类型的分数，redis正是通过分数来为集合中的成员进行从小到大的排序有序集合的成员是唯一，但分数(score)却可以重复 1. zadd - 添加语法…...

编程日记 2025/6/29 11:37:48

前缀和-724.寻找数组的中心下标-力扣(LeetCode)

一、题目解析我们需要求出中心下标处两边的和是否相等。二、算法解析解法1：暴力枚举 O(n*2)(时间复杂度) 固定i，计算[0,i-1]的和，计算[i1,n-1]的和，然后比较是否相等。遍历i为n次，每次计算n-1个数据的值&#xff…...

编程日记 2025/6/29 9:55:31

缓存与数据库数据一致性：旁路缓存、读写穿透和异步写入模式解析

旁路缓存模式、读写穿透模式和异步缓存写入模式是三种常见的缓存使用模式，以下是对三种经典缓存使用模式在缓存与数据库数据一致性方面更全面的分析： 一、旁路缓存模式（Cache - Aside Pattern） 1.数据读取流程应用程序首先向缓…...

编程日记 2025/6/29 9:19:04

HTML邮件背景图兼容 Outlook

在 HTML 邮件中设置背景图片时，Outlook（尤其是桌面版的 Outlook for Windows）经常不会正确显示背景图，这是因为outlook 是使用 Word 作为邮件渲染引擎，而不是标准的 HTML/CSS 渲染方式。推荐的解决方案：使…...

编程日记 2025/7/2 2:37:15

Linux之七大难命令（The Seven Difficult Commands of Linux）

Linux之七大难命令、背景作为Linux的初学者，肯定要先掌握高频使用的指令，这样才能让Linux的学习在短时间内事半功倍。但是，有些指令虽然功能强大，但因参数多而让初学者们很害怕，今天介绍Linux中高频使用&#xff0…...

编程日记 2025/6/29 11:43:32

每日Html 4.24

📚 每日一个Html小知识 🐍 每天花1分钟，解锁一个Html实用技巧/冷知识！无论是新手还是老手，这里都有让你眼前一亮的编程干货。 ✨ 今日主题：<dialog> 标签 💡 你知道吗？ 浏览…...

编程日记 2025/7/2 2:28:55

YOLOv11改进-双Backbone架构：利用双backbone提高yolo11目标检测的精度

一、引言：为什么我们需要双Backbone？ 在目标检测任务中，YOLO系列模型因其高效的端到端检测能力而备受青睐。然而，传统YOLO模型大多采用单一Backbone结构，即利用一个卷积神经网络（CNN）作为特征提…...

编程日记 2025/7/2 3:00:25

嵌入式Linux驱动开发：LED实验

在嵌入式Linux驱动开发中，LED实验可以通过多种方式实现，主要包括设备树下的LED实验、新字符设备驱动的LED实验和GPIO子系统的LED实验。这三种方式在硬件资源管理、驱动架构和开发流程上有显著区别，下面从多个维度进行对比分析： 1.…...

编程日记 2025/6/29 11:25:36

系统与网络安全------弹性交换网络（2）

资料整理于网络资料、书本资料、AI，仅供个人学习参考。 Eth-Trunk 组网中经常会遇到的问题链路聚合技术概述 Eth-Trunk（链路聚合技术）作为一种捆绑技术，可以把多个独立的物理接口绑定在一起，作为一个大带宽的逻辑…...

编程日记 2025/7/2 2:40:38

Kotlin Multiplatform--01：项目结构基础

Kotlin Multiplatform--01：项目结构基础引言Common CodeTargetsExpected 和 actual1.使用函数2.使用接口引言以下为使用 Android Studio 创建的默认 Kotlin Multiplatform 的项目结构，本章将对项目结构进行简单介绍，让读者对 Kotlin Multi…...

编程日记 2025/6/29 12:08:27

SEO（Search Engine Optimization，搜索引擎优化）相关知识点

SEO（Search Engine Optimization）是指搜索引擎优化，是计算机领域中通过技术手段和内容策略，提升网站在搜索引擎（如Google、Bing、百度）中自然（非付费）排名的系统性方法。是一种通过优…...

编程日记 2025/7/2 2:42:03

轻松完成视频创作,在线视频编辑器,无需下载软件,功能多样实用!

小白工具的在线视频编辑https://www.xiaobaitool.net/videos/edit/ 功能丰富、操作简便，在线裁剪或编辑视频工具，轻松完成视频创作能满足多种视频编辑需求。格式支持广泛：可编辑超百种视频格式，基本涵盖常见和小众视频格式&#…...

编程日记 2025/6/29 10:29:41

typescript学习笔记(全)

1.安装全局安装 npm i -g typescript局部安装 npm i typescript初始化 tsc --init就会在所在目录下创建出一个tsconfig.json的ts配置文件 2.编译如果是全局安装 tsc index.ts就会在同目录下编译出一个index.js文件如果是局部安装 npx tsc index.ts3.特性 1.静态类…...

编程日记 2025/6/29 9:19:07

centos挂载新的硬盘

如果要将 nvme0n1 挂载到 /data 目录（而不是 /），操作会更简单，无需迁移系统文件。以下是详细步骤： 1. 检查磁盘情况 lsblk输出： NAME MAJ:MIN RM SIZE RO TYPE MOUNTPOINT sda 8:0 …...

编程日记 2025/6/29 9:19:00

客户案例 | 西昊智能家具：日事清【目标】【日程】【项目】助力高效OKR管理

随着社会现代化、科技化的发展，人们越来越青睐智能化的家具产品，以此来提升家居的安全性、便利性与舒适性。目前，智能家具的行业规模正在不断扩张，产业也逐渐步入高质量增长模式。面对繁荣的市场前景，西昊智能家具与日…...

编程日记 2025/7/2 2:31:53

16.磁环在EMC设计中的选型与运用

磁环在EMC设计中的选型与运用 1. 磁环选型的参数和注意事项2. 磁环的选型方法3. 非晶磁环 1. 磁环选型的参数和注意事项 （1）损耗电阻R(f)和L(f)是频率的函数，因此IL也是频率的函数； （2）fL段，R(f…...

编程日记 2025/7/2 2:04:09

查询提交记录 SELECT s.sid,s.serial#,s.username,s.status,t.start_time,t.used_ublk,t.log_io,t.phy_io FROM v$session sJOIN v$transaction t ON s.saddr t.ses_addr; 查到的记录如下： 如果要终止第一次提交，如下操作 ALTER SYSTEM KILL SESSION…...

编程日记 2025/7/2 2:27:33

智能小助手部署 Win10 + ollama的Deepseek + CentOS+ maxKB

一、适用场景 1、企业内部知识管理 （1）快速查询政策与流程文档： 员工通过自然语言提问，MaxKB 能迅速定位相关文档并给出准确答案，减少人工检索成本，提升企业内部知识获取的效率。 （2&#xff0…...

编程日记 2025/7/2 2:39:56

CentOS 7 系统中，防火墙要怎么使用？

在 CentOS 7 系统中，默认有两个防火墙管理工具： firewalld（默认的动态防火墙，基于 D-Bus 管理） iptables（传统的静态防火墙，底层由 netfilter 提供支持） 是否需要关闭这两个防火墙…...

编程日记 2025/7/2 1:57:33

网页版 deepseek 对话问答内容导出为 PDF 文件和 Word 文件的浏览器插件下载安装和使用说明

文章目录网页版 deepseek 浏览器扩展应用程序插件1. 预览效果2. 功能介绍3. 浏览器扩展应用程序下载3.1. 下载方式13.2. 下载方式24. 安装教程4.1. Chrome 浏览器安装步骤4.2. Edge 浏览器安装步骤5. 使用说明网页版 deepseek 浏览器扩展应用程序插件 1. 预览效果预览效果导…...

编程日记 2025/6/29 12:16:54

MySQL 报错解析：SQLSyntaxErrorException caused by extra comma before FROM

一、遇到的错误在日常开发中，尤其是使用 MyBatis 等 ORM 框架操作 SQL 时，我们经常会遇到类似下面的错误。 ### Error querying database. Cause: java.sql.SQLSyntaxErrorException: You have an error in your SQL syntax; check the manual that co…...

编程日记 2025/6/29 11:23:53

高光谱相机在生物医学中的应用：病理分析、智慧中医与成分分析

高光谱成像技术（Hyperspectral Imaging, HSI）通过捕捉物质的连续光谱信息与空间信息，形成“光谱立方体”，能够揭示传统成像技术无法获取的分子级特征。作为国内光谱技术领域的领军企业，深圳市中达瑞和科技有限公司依托…...

编程日记 2025/6/29 9:19:08

2025 年“泰迪杯”数据挖掘挑战赛B题——基于穿戴装备的身体活动监测问题分析

摘要本文聚焦于基于穿戴设备采集的加速度计数据，深入研究志愿者在日常活动中的行为特征，构建了多个数学建模框架，实现从身体活动监测、能耗预测、睡眠阶段识别到久坐预警等多个目标。我们依托于多源数据融合与机器学习模型，对人体活动状态进行识别与分析，为健康管理、行…...

编程日记 2025/7/2 2:54:20

10.接口而非实现编程

10.接口而非实现编程目录介绍 01.接口编程原则 1.1 接口指导思想 02.如何理解接口 2.1 重点搞清楚接口2.2 抽象的思想 03.来看一个案例 3.1 图片存储的案例3.2 业务拓展问题3.3 代码演变设计思想3.4 重构后的代码 04.定义接口的场景 4.1 要有接口意识4.2 接口具体的场景4.3 …...

编程日记 2025/7/2 1:33:51

基于大语言模型的AI智能体开发：构建具备工具使用能力的智能助手

本文将结合大语言模型（LLM）与工具调用能力，构建新一代AI智能体系统。通过ReAct框架实现智能思考-行动循环，集成网络搜索、计算器、API调用等外部工具，并基于LangChain实现可扩展的智能体架构。一、新一代AI智能体技术…...

编程日记 2025/6/29 9:19:11

DS B/B+/B*树及其应用(21)

文章目录前言一、常见的搜索结构内查找外查找二、B树的概念三、B树的插入分析四、B树的插入实现B树的节点设计B树的查找B树插入Key / Key & Value的过程B树的完整插入代码B树的中序遍历B树的删除B树的性能分析五、B树六、B*树七、B树系列总结及其应用总结前言我们计算…...

编程日记 2025/7/2 2:46:37

04-stm32的标准外设库

一、概述 1、STM32标准外设库（Standard Peripheral Library）是STMicroelectronics为STM32系列微控制器提供的一个软件库，它提供了一组API函数来简化对STM32微控制器硬件的访问。这个库包含了对各种外设（如GPIO、USART、SPI、I2C等…...

编程日记 2025/6/29 11:31:52

ORACLE RAC环境使用ASM机制零宕机时间更换存储的实践

ORACLE RAC使用存储，随时系统的发展，磁盘空间以及存储的老化、更换是一个典型的动作；基于ASM数据自动均衡分配到各个磁盘LUN的特性，可以使用此方式进行在线的迁移，ORACLE MOS上有一个文档：中文版&#xff1…...

编程日记 2025/6/29 9:46:47

03_JavaScript

文章目录一、概述1.1、JavaScript简介1.2、JavaScript组成部分1.3、为什么要学习JavaScript1.4、学习的目的1.5、JavaScript与Java的关系二、使用位置及运行说明2.1、使用位置2.2、如何运行三、JavaScript基础语法3.1、变量3.2、运算符3.3、控制流程3.3.1、分支结构3.3.2、循…...

编程日记 2025/7/2 2:38:06

Kafka消息可视化工具Offset Explorer

参考文献 Kafka消息可视化工具：Offset Explorer（原名kafka Tool）的使用方法【转】 - paul_hch - 博客园 https://zhuanlan.zhihu.com/p/722232008 正文官网下载地址为Offset Explorer 双击offsetexplorer_64bit.exe 安装双击使用kafka…...

编程日记 2025/6/29 9:54:10

AXP2101入门

目录核心功能与特性封装与配置安全与可靠性 AXP2101 是一款由全志公司开发的单电池 NVDC 电源管理集成电路（PMIC），专为锂离子/锂聚合物单电池应用设计，适用于需要多通道电源输出的设备。核心功能与特性 1.输入与充电管理输入…...

编程日记 2025/6/29 10:59:50

Bytebase 取得 SOC 2 Type 1 认证

我们很高兴地宣布，Bytebase 已成功取得 SOC 2 Type 1 认证，印证了我们在数据库 DevSecOps 平台始终以最高标准保障安全性、可用性和保密性的承诺。为了实现并维持 SOC 2 合规性，我们与 Vanta 合作进行自动安全监控和合规性验证。审计由独立…...

编程日记 2025/6/29 11:48:53

反爬系列 IP 限制与频率封禁应对指南

在数据采集领域，IP 限制与频率封禁是反爬机制中最常见的防御手段。随着网站安全策略的升级，单靠传统爬虫技术已难以应对高强度的检测。本文将从反爬机制解析、实战应对策略两个维度，系统讲解如何突破 IP 限制与频率封禁。一、反爬机制解析 …...

编程日记 2025/6/29 9:19:14

Java的进阶学习

注解 Java注解(Annotation)又称为Java标注，是JDK5.0引入的一种注释机制，可以用在类、方法、变量、参数成员上，在编译期间，会被编译到字节码文件中，运行时通过反射机制获得注解内容进行解析。内置注解 Java语言已经定…...

编程日记 2025/6/29 10:50:11

从零开始学习SLAM｜技术路线

概念视觉SLAM（Simultaneous Localization and Mapping）系统中，整个过程通常分为前端和后端两个主要部分。前端处理的是从传感器数据（如相机图像、激光雷达等）中提取和处理信息，用于实时定位和建图&am…...

编程日记 2025/6/29 9:19:13

vue3:十一、主页面布局(修改顶部导航栏样式-右侧：用户信息+退出登录+全屏显示)

一、效果完成效果，增加顶部导航栏，右侧用户信息(其中个人中心需要后续进行页面开发，这里只写了退出登录功能)，以及全屏功能二、搭建并引入右侧组件将右侧内容封装到单独的组件，直接引入(像左侧导航条等内容也是可以做成这种形式) 1、新建右侧组件的页面在layout中…...

编程日记 2025/6/29 12:09:30

车载客流记录仪简介

一、产品概述车载客流记录仪技术是采用智能视频分析算法，通过人体形态特征（头部和肩部）及上下车的运动规律研判，在设定区域内分析出上下车人数数量，实现相关人数数据的统计和记录。能够为公共交通企业、公共交通管理…...

编程日记 2025/6/29 10:59:46

2025新版懒人精灵零基础及各板块核心系统视频教程-全分辨率免ROOT自动化开发

2025新版懒人精灵零基础安装调试lua基础UI设计交互常用方法封装项目实战项目打包安装板块-视频教程(初学者必修课) 1.懒人精灵核心API基础和lua基础视频教程：https://www.bilibili.com/video/BV1Vm9kYJEfM/ 其它板块教程(包含：对接AI、实战、插件、UI、…...

编程日记 2025/6/29 9:55:54

从 Java 到 Kotlin：在现有项目中迁移的最佳实践！

全文目录： 开篇语 1. 为什么选择 Kotlin？1.1 Kotlin 与 Java 的兼容性1.2 Kotlin 的优势1.3 Kotlin 的挑战 2. Kotlin 迁移最佳实践2.1 渐进式迁移2.1.1 步骤一：将 Kotlin 集成到现有的构建工具中2.1.2 步骤二：逐步迁移2.1.3 步骤…...

编程日记 2025/6/29 12:21:15

矩阵运营的限流问题本质上是平台与创作者之间的流量博弈

矩阵运营的限流问题本质上是平台与创作者之间的流量博弈，要系统性解决这一问题，需从技术规避、内容优化、运营策略三个维度构建防御体系。以下结合平台算法逻辑与实战案例，深度解析限流成因及破解之道： 一、技术层：突…...

编程日记 2025/6/29 12:32:07

一、setup

一、setup 函数基础

二、核心参数解析

三、<script setup> 语法糖

基础用法

特性对比

二、computed（计算属性）

1. 基础用法

2. 可写计算属性

3. 最佳实践

三、watch（侦听器）

1. 侦听 ref 对象

2. 侦听 reactive 对象

3. 多源侦听

四、watchEffect（副作用侦听）

1. 基础用法

2. 副作用清理

3. 调试选项

核心对比

五、使用场景示例

1. 搜索过滤（computed）

2. 路由参数变化（watch）

3. 自动保存（watchEffect）

六、最佳实践

1. 优先选择

2. 性能优化

3. 组合使用

七、常见问题

Q1: watch 和 watchEffect 如何选择？

Q2: 为什么 computed 需要返回函数？

Q3: 如何停止侦听器？

Q4: 如何处理异步操作？

响应式API

一、核心 API 对比表

二、ref 与 reactive 深度解析

1. ref 最佳实践

2. reactive 最佳实践

三、toRefs 与 toRef 核心差异

1. toRefs 使用示例

2. toRef 使用示例

四、组合使用模式

1. 组合式函数中的标准模式

2. Props 处理最佳实践

五、常见问题解决方案

六、TypeScript 类型处理技巧

1. ref 类型标注

2. reactive 类型推断

3. toRefs 类型保留

七、性能优化建议

八、综合应用示例

相关文章：

一、`setup` 函数基础

三、`<script setup>` 语法糖

二、`ref` 与 `reactive` 深度解析

1. `ref` 最佳实践

2. `reactive` 最佳实践

三、`toRefs` 与 `toRef` 核心差异

1. `toRefs` 使用示例

2. `toRef` 使用示例

1. `ref` 类型标注

2. `reactive` 类型推断

3. `toRefs` 类型保留