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

前端面经-VUE3篇--vue3基础知识（一）插值表达式、ref、reactive

news 来源：原创 2025/5/7 3:47:54

一、计算属性(`computed`)

计算属性（Computed Properties）是 Vue 中一种特殊的响应式数据，它能基于已有的响应式数据动态计算出新的数据。

计算属性有以下特性：

自动缓存：只有当它依赖的响应式数据发生变化时，才会重新计算。
响应式更新：依赖的数据变化后，会自动触发计算属性重新计算。
简化模板：在模板中使用计算属性可以减少复杂逻辑，让模板更清晰、易读。

简单来说：

计算属性是基于其他响应式数据而自动计算得到的值，且具有缓存和响应式的特性。

1、计算属性的基本用法

<script setup>
import { ref, computed } from 'vue'// 响应式数据
const firstName = ref('Tom')
const lastName = ref('Jerry')// 计算属性（根据响应式数据动态计算）
const fullName = computed(() => {return `${firstName.value} ${lastName.value}`
})
</script><template><div>{{ fullName }}</div> <!-- 显示：Tom Jerry -->
</template>

注意默认计算属性是只读的，但也可以定义成可写。当你尝试修改一个计算属性时，你会收到一个运行时警告。只在某些特殊场景中你可能才需要用到“可写”的属性，你可以通过同时提供 getter 和 setter 来创建：

<script setup>
import { ref, computed } from 'vue'const firstName = ref('John')
const lastName = ref('Doe')const fullName = computed({// getterget() {return firstName.value + ' ' + lastName.value},// setterset(newValue) {// 注意：我们这里使用的是解构赋值语法[firstName.value, lastName.value] = newValue.split(' ')}
})
</script>

现在当你再运行 fullName.value = 'John Doe' 时，setter 会被调用而 firstName 和 lastName 会随之更新。

注意，computed()里面不接受任何的参数，我们看到里面有一个回调函数，这个回调函数本质上是getter函数

之前版本（<3.4），这个 getter 函数没有参数。
从 3.4 开始，这个 getter 函数可以接受一个参数：就是上一次计算属性的计算结果。

简单来说：

如果需要，可以通过访问计算属性的 getter 的第一个参数来获取计算属性返回的上一个值：

<script setup>
import { ref, computed } from 'vue'const count = ref(2)// 这个计算属性在 count 的值小于或等于 3 时，将返回 count 的值。
// 当 count 的值大于等于 4 时，将会返回满足我们条件的最后一个值
// 直到 count 的值再次小于或等于 3 为止。
const alwaysSmall = computed((previous) => {if (count.value <= 3) {return count.value}return previous
})
</script>

如果你正在使用可写的计算属性的话：

<script setup>
import { ref, computed } from 'vue'const count = ref(2)const alwaysSmall = computed({get(previous) {if (count.value <= 3) {return count.value}return previous},set(newValue) {count.value = newValue * 2}
})
</script>

2、计算属性与方法（methods）的详细区别

两者区别如下：

对比维度	计算属性（computed）	方法（methods）
缓存机制	有缓存，仅数据变化才重新计算	无缓存，每次调用都会执行
调用方式	不需要括号调用，像属性一样使用	需要括号调用，明确为函数
适用场景	基于响应式数据的计算	处理事件或显式调用的场景
性能开销	性能较高（缓存优化）	性能较低（频繁调用时）

计算属性与方法性能差异分析

假设模板多次渲染对比：

计算属性：

<div>{{ doubleCount }}</div>
<div>{{ doubleCount }}</div>
<div>{{ doubleCount }}</div>

只计算一次，缓存结果。

方法调用：

<div>{{ getDoubleCount() }}</div>
<div>{{ getDoubleCount() }}</div>
<div>{{ getDoubleCount() }}</div>

每次都调用一次，共调用3次，性能浪费。

因此，对于频繁使用但数据不频繁变化的场景，建议使用计算属性。

3、计算属性什么时候不能用？

计算属性适用于：

同步、快速的计算逻辑。
无副作用的计算（纯函数）。

计算属性不适合：

异步逻辑（如请求数据）。
执行副作用（修改其他数据、DOM 操作）。

二、监听属性

在 Vue 中，监听属性（Watcher） 是一种响应式机制，用于监测响应式数据的变化：

当你想在数据发生变化时执行某些逻辑（如发送请求、更新数据或执行某些副作用）时，就可以使用监听属性。
监听属性通过 Vue 提供的 watch() 或 watchEffect() 函数实现。

简单来说：

监听属性让你能够对数据变化做出反应，执行一些副作用或异步操作。

1、监听属性的基本用法（watch）

<script setup>
import { ref, watch } from 'vue'const count = ref(0)// 监听 count 的变化
watch(count, (newValue, oldValue) => {console.log(`count变化了：从${oldValue}到${newValue}`)
})
</script><template><button @click="count++">增加 ({{ count }})</button>
</template>

当 count 的值改变时，watch 会自动触发，执行回调函数。

监听多个数据：

const firstName = ref('Tom')
const lastName = ref('Jerry')// 同时监听 firstName 和 lastName
watch([firstName, lastName], ([newFirst, newLast], [oldFirst, oldLast]) => {console.log(`名字变化了：${oldFirst} ${oldLast} => ${newFirst} ${newLast}`)
})

2、监听属性的参数与选项（高级用法）

🔹 监听属性的函数签名：watch(source, callback, options)

source: 需要监听的响应式数据，可以是单个或多个。可以是不同形式的“数据源”：它可以是一个 ref (包括计算属性)、一个响应式对象、一个 getter 函数、或多个数据源组成的数组：
callback: 数据变化时执行的回调函数。
options: 可选参数，控制监听器行为。

🔹 常用的监听选项（options）：

选项	含义	默认值
`immediate`	是否立即执行一次监听回调	false
`deep`	是否深度监听对象内部属性变化	false
`flush`	控制监听器回调的执行时机	'pre'

深度监听（deep）到底是什么？

默认情况下，Vue 的监听器只能监听对象引用本身的变化（比如替换对象）。
使用 deep: true 时，能监听对象或数组内部属性或元素的变化。

const user = ref({ name: 'Tom', age: 18 })// 默认浅监听（只能监听整个对象变化）
watch(user, () => {console.log('浅监听：user变化了')
})user.value.age = 19 // ❌不会触发浅监听（对象引用未变）
user.value = { name: 'Jerry', age: 19 } // ✔️触发// 深度监听（对象内部属性变化也会触发）
watch(user, () => {console.log('深监听：user变化了')
}, { deep: true })user.value.age = 20 // ✔️触发深度监听

监听属性的执行时机（flush）

flush 控制监听回调的执行时机：

flush 值	含义	使用场景
`pre`	默认值，组件更新之前执行	大多数情况
`post`	组件更新之后执行	需要访问更新后的DOM时
`sync`	同步触发，数据变化立即执行	非常特殊情况

3、watch vs watchEffect 的区别

在 Vue 中，watch() 和 watchEffect() 都用于响应式地执行一些副作用操作（如发起请求、改变 DOM），但二者的追踪数据依赖方式不同：

特性	`watch()`	`watchEffect()`
如何追踪依赖	手动显式指定要监听的数据（明确）	自动追踪回调中访问的数据（隐式）
首次执行	默认不立即执行，需手动开启	自动立即执行一次
控制粒度	精确控制监听的数据项，控制更细	自动追踪所有访问的响应式数据，更灵活
适用场景	明确知道监听什么数据变化	数据依赖较多或复杂，更希望自动追踪

举个简单例子，监听单个明确的数据：

const todoId = ref(1)
const data = ref(null)watch(todoId,async () => {const response = await fetch(`https://jsonplaceholder.typicode.com/todos/${todoId.value}`)data.value = await response.json()},{ immediate: true }
)

特点：

todoId 被显式声明为监听的源。
回调函数只在明确的源数据（todoId）改变时触发。
必须用 { immediate: true } 来立即执行一次，否则首次不会执行。

1、 `watchEffect()` 如何简化上面的例子？

const todoId = ref(1)
const data = ref(null)watchEffect(async () => {const response = await fetch(`https://jsonplaceholder.typicode.com/todos/${todoId.value}`)data.value = await response.json()
})

特点：

自动立即执行一次，无需手动指定 { immediate: true }。
无需手动指定监听源，回调函数内的所有响应式数据访问（这里是 todoId.value）会自动被 Vue 跟踪。
一旦被跟踪的数据变化（例如：todoId.value 改变），回调会自动再次执行。

2、`watchEffect()` 的依赖跟踪原理（关键）：

watchEffect() 会自动追踪回调函数在同步执行时访问的所有响应式数据。
但有个重要提示：

如果回调是异步函数，那么只有在第一个 await 之前访问的数据才会被追踪！

watchEffect(async () => {console.log(todoId.value) // ✅ 被追踪，因为在 await 之前访问const response = await fetch('...')console.log(someOtherRef.value) // ❌ 不被追踪，因为在 await 之后访问
})

原因是：

Vue 只能追踪同步执行阶段访问的数据。
在异步操作完成后的回调内访问的数据不会被 Vue 追踪。

`3、watchEffect()` 在实际场景中的优势：

优势一：自动跟踪多个数据源（不必手动指定）：

假如你有多个响应式数据：

const firstName = ref('Tom')
const lastName = ref('Jerry')watchEffect(() => {console.log(`Name: ${firstName.value} ${lastName.value}`)
})Vue 自动监控 firstName 和 lastName。无论哪个改变，都会触发回调函数。使用 watch() 则必须手动指定数据源：
watch([firstName, lastName], () => {console.log(`Name: ${firstName.value} ${lastName.value}`)
})

优势二：更精细地跟踪对象属性（比深监听高效）：

假如你有复杂对象：

const user = ref({name: 'Tom',age: 20,address: { city: 'Shanghai', street: 'Main St' }
})watchEffect(() => {console.log(`User city: ${user.value.address.city}`)
})watchEffect() 只监听了对象的部分属性 (address.city)，高效、精准。如果用深监听 (watch(user, ..., { deep: true }))，会监听所有属性的变化，性能可能较差。

4、什么时候用 `watch()`？什么时候用 `watchEffect()`？

场景	推荐方式	理由
明确知道监听的数据源	✅ 使用 `watch()`	明确指定，粒度精准
多个数据源或依赖复杂	✅ 使用 `watchEffect()`	自动跟踪，代码更简洁、更灵活
动态数据请求或复杂副作用	✅ `watchEffect()`	自动监听，省去手动指定烦恼

4、监听属性的常见使用场景

场景	示例
数据变化请求API	表单值变化时重新获取数据
数据变化存储数据	自动保存用户输入
执行副作用	数据变化时更新DOM或执行动画

5、监听属性的注意事项

避免无限循环：

watch(count, (val) => {count.value++ // ⚠️ 无限循环，不要这样做
})

不要监听非响应式数据（监听无效）：

const plain = { name: 'Tom' }
watch(plain, () => {}) // ❌ 无效

使用深监听时注意性能问题（深监听成本较高）：
```
watch(obj, () => {}, { deep: true }) // 谨慎使用
```
注意，你不能直接侦听响应式对象的属性值，例如、

const obj = reactive({ count: 0 })// 错误，因为 watch() 得到的参数是一个 number
watch(obj.count, (count) => {console.log(`Count is: ${count}`)
})

这里需要用一个返回该属性的 getter 函数：

// 提供一个 getter 函数
watch(() => obj.count,(count) => {console.log(`Count is: ${count}`)}
)

6、副作用清理

在 Vue 中，所谓的副作用通常指：

异步请求（如 API 请求）
定时器 (setTimeout、setInterval)
DOM 操作、监听事件
其他非纯函数的逻辑

这些操作不是立即完成的，可能会在未来某个时刻继续执行。

为什么需要副作用清理？

以 API 请求为例：假设我们有一个监听器监听 id：
watch(id, (newId) => {fetch(`/api/${newId}`).then(() => {console.log('请求完成，当前ID:', newId)})
})

可能的问题：

当你快速修改 id：

请求 1 (/api/1) 发出后，还未完成。
请求 2 (/api/2) 立即发出。
如果请求 2 的响应比请求 1 快，那么请求 1 的响应（较慢）回来时，结果是过时的，但还是会被处理。

我们想要的：

当数据变化时，上一个异步请求应被取消或忽略，不再执行后续逻辑。

为了解决这个问题，Vue 提供了副作用清理机制。

副作用清理函数 (`onCleanup()`)

从 Vue 3.0 开始，Vue 提供了一个清理机制，称为 onCleanup。

watch(id, (newId, oldId, onCleanup) => {const controller = new AbortController()fetch(`/api/${newId}`, { signal: controller.signal }).then((res) => res.json()).then((data) => {console.log('请求结果:', data)})onCleanup(() => {controller.abort() // 取消上一个请求})
})

含义解释：

每次监听的数据 (id) 变化时：
- 先调用上一次注册的 onCleanup 清理函数。
- 然后再执行新一次监听回调。
因此，上一次的异步请求会自动终止，避免过时请求的结果被错误处理。

watchEffect() 中的副作用清理

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

原理相同：

每次响应式数据变化重新执行副作用之前，先调用清理函数。
确保副作用（定时器、请求等）不重叠，避免内存泄漏或数据错乱。

从 Vue 3.5 版本开始，引入了新 API：onWatcherCleanup()：

import { watch, onWatcherCleanup } from 'vue'watch(id, (newId) => {const controller = new AbortController()fetch(`/api/${newId}`, { signal: controller.signal }).then(() => {console.log('请求完成:', newId)})onWatcherCleanup(() => {controller.abort() // 取消上一个请求})
})

特点：

不再需要第三个参数 onCleanup。
可以独立地在监听器或 watchEffect() 回调函数内调用清理函数。

使用限制：

必须在同步阶段调用，不可放在 await 之后。
因此，必须在异步操作之前注册。

正确用法（同步调用）：watch(id, (newId) => {const controller = new AbortController()onWatcherCleanup(() => controller.abort()) // 同步调用，正确！fetch(`/api/${newId}`, { signal: controller.signal })
})❌ 错误用法（异步调用）：watch(id, async (newId) => {const controller = new AbortController()await someAsyncOperation()onWatcherCleanup(() => controller.abort()) // ❌ 错误！异步调用

前端面经-VUE3篇--vue3基础知识（一）插值表达式、ref、reactive

一、计算属性(computed) 计算属性（Computed Properties）是 Vue 中一种特殊的响应式数据，它能基于已有的响应式数据动态计算出新的数据。计算属性有以下特性： 自动缓存：只有当它依赖的响应式数据发生变化时&#xff…...

编程日记 2025/5/7 3:47:54

云原生后端架构的优势与最佳实践

📝个人主页🌹：慌ZHANG-CSDN博客 🌹🌹期待您的关注 🌹🌹 在过去的几年里，随着云计算和容器化技术的迅猛发展，云原生架构逐渐成为现代企业和开发团队构建和运维应用系统的首选方式。云原生架构通过高度的自动化、弹性伸缩、微服务化等特点，使得企业能够在不断变化…...

编程日记 2025/5/3 8:19:46

力扣838.推多米诺随笔

“生活就像海洋，只有意志坚强的人，才能到达彼岸。”—— 马克思题目 n 张多米诺骨牌排成一行，将每张多米诺骨牌垂直竖立。在开始时，同时把一些多米诺骨牌向左或向右推。每过一秒，倒向左边的多米诺骨牌会推动其左侧…...

编程日记 2025/5/3 8:19:45

aab转apk

一、 android34升级： 1、升级到安卓34（蓝牙、图片） 再蓝牙广播的地方加入Context.RECEIVER_EXPORTED 2、废弃了 BluetoothAdapter#enable() 和 BluetoothAdapter#disable()，需要修改 // 以前的蓝牙操作BluetoothManager bluetoo…...

编程日记 2025/5/3 8:19:44

LeetCode 560. 和为 K 的子数组 | 前缀和与哈希表的巧妙应用

文章目录方法思路：前缀和哈希表核心思想关键步骤代码实现复杂度分析示例解析总结题目描述给定一个整数数组 nums 和一个整数 k，请统计并返回该数组中和为 k 的子数组的数量。子数组是数组中连续的非空元素序列。示例输入：nums …...

编程日记 2025/5/3 8:19:44

【Hive入门】Hive性能调优：小文件问题与动态分区合并策略详解

目录引言 1 Hive小文件问题概述 1.1 什么是小文件问题 1.2 小文件产生的原因 2 Hive小文件合并机制 2.1 hive.merge.smallfiles参数详解 2.2 小文件合并流程 2.3 合并策略选择 3 动态分区与小文件问题 3.1 动态分区原理 3.2 动态分区合并策略 3.3 动态分区合并流程…...

编程日记 2025/5/3 8:19:43

基于Springboot+Vue3.0的前后端分离的个人旅游足迹可视化平台

文章目录 0、前言1、前端开发1.1 登录注册页面1.2 首页1.3 足迹管理1.3.1 足迹列表1.3.2 添加足迹1.4 个人中心1.4.1 足迹成就1.4.2 个人信息1.4.3 我的计划2、后端开发2.1 用户接口开发2.2 足迹点接口2.3 旅游计划接口3、完整代码资料下载0、前言项目亮点：前端用户权限动态…...

编程日记 2025/5/3 8:18:37

安妮推广导航系统开心版多款主题网址推广赚钱软件推广变现一键统计免授权源码Annie

一、源码描述这是一套推广导航源码（Annie），基于Funadmin框架（ThinkPHP8Layui ），内置多款主题，可以用于网址推广，或者用于软件推广，PC端软件手机端软件，后台…...

编程日记 2025/5/3 8:17:35

单片机-STM32部分：1、STM32介绍

飞书文档https://x509p6c8to.feishu.cn/wiki/CmpZwTgHhiQSHZkvzjdc6c4Yn1g STM32单片机不是一款芯片，而是一个系列的芯片？ STM32系列单片机是ST（意法半导体）公司开发的一套32位微控制器基于Arm Cortex()-M处理器，它包…...

编程日记 2025/5/3 8:17:34

PHP-session

PHP中，session（会话）是一种在服务器上存储用户数据的方法，这些数据可以在多个页面请求或访问之间保持。Session提供了一种方式来跟踪用户状态，比如登录信息、购物车内容等。当用户首次访问网站时，服务器会创…...

编程日记 2025/5/3 8:17:34

php artisan resetPass 执行密码重置失败的原因？php artisan resetPass是什么如何使用？-优雅草卓伊凡

php artisan resetPass 执行密码重置失败的原因？php artisan resetPass是什么如何使用？-优雅草卓伊凡可能的原因命令不存在：如果你没有正确定义这个命令，Laravel 会报错而不是提示”重置密码失败”用户不存在：’a…...

编程日记 2025/5/3 8:17:32

AI大模型-微调和RAG方案选项

在搭建知识库的方向上，有两个落地方案：微调、RAG。两个方案的比对： 方案选型微调让大模型（LLM）去学习现有知识（调整大模型的参数，让它学习新的知识），最终生成一个新的…...

编程日记 2025/5/3 8:16:31

MySQL 第一讲---基础篇安装

前言： 在当今数据驱动的时代，掌握数据库技术已成为开发者必备的核心技能。作为全球最受欢迎的开源关系型数据库，MySQL承载着淘宝双十一每秒50万次的交易请求，支撑着Facebook百亿级的数据存储，更是无数互联网企业的数据…...

编程日记 2025/5/3 8:16:30

【JavaScript-Day 1】从零开始：全面了解 JavaScript 是什么、为什么学以及它与 Java 的区别

Langchain系列文章目录 01-玩转LangChain：从模型调用到Prompt模板与输出解析的完整指南 02-玩转 LangChain Memory 模块：四种记忆类型详解及应用场景全覆盖 03-全面掌握 LangChain：从核心链条构建到动态任务分配的实战指南 04-玩转 LangChai…...

编程日记 2025/5/3 8:16:28

C++ 复习

VS 修改 C 语言标准右键项目-属性输入输出 //引用头文件，用<>包裹起来的一般是系统提供的写好的代码编译器会在专门的系统路径中去进行查找 #include <iostream> //自己写的代码文件一般都用""包裹起来编译器会在当前文件所在的目录中査…...

编程日记 2025/5/3 8:15:27

数字智慧方案5877丨智慧交通项目方案（122页PPT）（文末有下载方式）

篇幅所限，本文只提供部分资料内容，完整资料请看下面链接 https://download.csdn.net/download/2301_78256053/89575494 资料解读：智慧交通项目方案详细资料请看本解读文章的最后内容。智慧交通项目方案是一个全面的设计框架，…...

编程日记 2025/5/3 8:14:25

如何封装一个线程安全、可复用的 HBase 查询模板

目录一、前言：原生 HBase 查询的痛点 （一）连接管理混乱，容易造成资源泄露 （二）查询逻辑重复，缺乏统一的模板 （三）多线程/高并发下的线程安全性隐患 （四…...

编程日记 2025/5/3 8:13:22

VLM Qwen2.5VL GRPO训练微调 EasyR1 多机多卡训练（2）

在之前博客进行了简单的训练尝试：https://www.dong-blog.fun/post/2060 在本博客，将会深入进行多机多卡训练，以及调整训练奖励函数。之前构建了镜像： docker build . -t kevinchina/deeplearning:r1 FROM hiyouga/verl:ngc-th2.6.0-cu126-vllm0.8.4-flashinfer0.2.2-cx…...

编程日记 2025/5/3 8:13:21

基于建造者模式的信号量与理解建造者模式

信号量是什么？ AI解释：信号量（Semaphore）是操作系统中用于进程同步与互斥的经典工具，由荷兰计算机科学家 Edsger Dijkstra 在 1965 年提出。它本质上是一个非负整数变量，通过原子操作（P 操作…...

编程日记 2025/5/3 8:12:20

笔试专题（十四）

文章目录 mari和shiny题解代码体操队形题解代码二叉树中的最大路径和题解代码 mari和shiny 题目链接题解 1. 可以用多状态的线性dp 2. 细节处理：使用long long 存储个数 3. 空间优化：只需要考虑等于’s’，‘sh’，shy’的情况…...

编程日记 2025/5/3 8:12:19

2025年五一数学建模A题【支路车流量推测】原创论文讲解

大家好呀，从发布赛题一直到现在，总算完成了2025年五一数学建模A题【支路车流量推测】完整的成品论文。给大家看一下目录吧： 摘要： 一、问题重述二．问题分析 2.1问题一 2.2问题二 2.3问题三 2.4问题四 2.5 …...

编程日记 2025/5/3 8:12:18

Linux系统：进程程序替换以及相关exec接口

本节重点理解进程替换的相关概念与原理掌握相关程序替换接口程序替换与进程创建的区别程序替换的注意事项一、概念与原理进程程序替换是操作系统中实现多任务和资源复用的关键机制，允许进程在运行时动态加载并执行新程序。 1.1 定义进程程序替换是指用新程…...

编程日记 2025/5/3 8:12:18

STM32复盘总结——芯片简介

1、stm32介绍 STM32是ST公司基于ARM Cortex-M内核开发的32位微控制器 STM32常应用在嵌入式领域，如智能车、无人机、机器人、无线通信、物联网、工业控制、娱乐电子产品等 STM32功能强大、性能优异、片上资源丰富、功耗低，是一款经典的嵌入式微控制器目…...

编程日记 2025/5/3 8:11:16

安装深度环境anaconda+cuda+cudnn+pycharm＋qt＋MVS

下载anaconda，链接：link 默认电脑有显卡驱动，没有的话直接进NVIDIA官网：https://www.nvidia.cn/geforce/drivers/ 下载。下载cuda 链接：https://developer.nvidia.com/cuda-toolkit-archive 下载cudnn安装包,链接：https://developer.nvidia.com/rdp/cudnn-archive 备注：…...

编程日记 2025/5/3 8:11:15

泰迪杯特等奖案例学习资料：基于多模态特征融合的图像文本检索系统设计

（第十二届泰迪杯数据挖掘挑战赛B题特等奖案例解析）一、案例背景与核心挑战 1.1 应用场景与行业痛点随着智能终端与社交媒体的普及，图像与文本数据呈现爆炸式增长，跨模态检索需求日益迫切。传统方法面临以下问题：语义鸿沟：图像与文本的异构特征分布差异显著，导致跨模…...

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

进程与线程：05 内核级线程实现

内核级线程代码实现概述这节课我们要讲内核级线程到底是怎么做出来的，实际上就是要深入探讨内核级线程的代码实现。在前两节课中，我们学习了用户级线程和内核级线程是如何进行切换的，以及实现切换的核心要点。那两节课讲述的内容&#xf…...

编程日记 2025/5/3 8:10:08

Laravel 12 实现 API 登录令牌认证

Laravel 12 实现 API 登录令牌认证在 Laravel 12 中实现基于令牌(Token)的 API 认证，可以使用 Laravel Sanctum 或 Laravel Passport。以下是两种方式的实现方法： 方法一：使用 Laravel Sanctum (轻量级 API 认证) 1. 安装 Sanctum compo…...

编程日记 2025/5/3 8:10:08

【Git】万字详解 Git 的原理与使用（上）

🥰🥰🥰来都来了，不妨点个关注叭！ 👉博客主页：欢迎各位大佬!👈 文章目录 1. 初识 Git1.1 Git 是什么？1.2 为什么要有 Git 2. 安装 Git2.1 Linux-Ubuntu 安装 Git2.2 Windo…...

编程日记 2025/5/3 8:09:04

Python高级爬虫之JS逆向+安卓逆向1.7节: 面向对象

目录引言： 1.7.1 先理解面向过程 1.7.2 再理解面向对象 1.7.3 面向对象的三大特征 1.7.4 类属性，类方法，静态方法 1.7.5 构造函数，对象属性，对象方法 1.7.6 爬虫接单实现了雪糕自由引言：大神薯条老师的高级爬虫+安卓逆向教程：这套爬虫教程会系统讲解爬虫的初…...

编程日记 2025/5/3 8:09:03

SpringBoot基础（原理、项目搭建、yaml）

SpringBoot：javaweb的一个框架，基于Spring开发，SpringBoot本身并不提供Spring框架的核心特性以及扩展功能，只是用于快速、敏捷的开发新一代基于Spring框架的应用程序，它与Spring框架紧密结合用于提升Spring开发者体验的…...

编程日记 2025/5/3 8:09:02

MTV-SCA：基于多试向量的正弦余弦算法

3 正弦余弦算法 (SCA) 正弦余弦算法（SCA）是为全局优化而开发的，并受到两个函数，正弦和余弦的启发。与其他基于启发式种群的算法一样，SCA在问题的预设最小值和最大值边界内随机生成候选解。然后，通过应用方…...

编程日记 2025/5/3 8:08:01

STL之vector容器

vector的介绍 1.vector是可变大小数组的容器 2.像数组一样，采用连续的空间存储，也就意味着可以通过下标去访问，但它的大小可以动态改变 3.每次的插入都要开空间吗？开空间就要意味着先开临时空间，然后在拷贝旧的到新…...

编程日记 2025/5/3 8:07:59

Android学习总结之jetpack组件间的联系

在传统安卓开发中，UI 组件（Activity/Fragment）常面临三个核心问题： 生命周期混乱：手动管理 UI 与数据的绑定 / 解绑，易导致内存泄漏（如 Activity 销毁后回调仍在触发）。数据断层&am…...

编程日记 2025/5/3 8:07:58

linux的信号量初识

Linux下的信号量(Semaphore)深度解析在多线程或多进程并发编程的领域中，确保对共享资源的安全访问和协调不同执行单元的同步至关重要。信号量（Semaphore）作为经典的同步原语之一，在 Linux 系统中扮演着核心角色。本文将深入探讨…...

编程日记 2025/5/3 8:07:57

【安装指南】Centos7 在 Docker 上安装 RabbitMQ4.0.x

目录前置知识：RabbitMQ 的介绍一、单机安装 RabbitMQ 4.0.7版本 1.1 在线拉取镜像二、延迟插件的安装 2.1 安装延迟插件步骤一：下载延迟插件步骤二：将延迟插件放到插件目录步骤三：启动延迟插件步骤四：重启 RabbitMQ 服务步骤五：验收成果步骤六：手动…...

编程日记 2025/5/3 8:07:56

Android和iOS测试的区别有哪些？

作为移动端测试工程师，Android 和 iOS 的测试差异直接影响测试策略设计。本文从测试环境、工具链、兼容性、发布流程等维度全面解析，并附实战建议。 1. 测试环境差异维度AndroidiOS设备碎片化高（厂商/分辨率/系统版本多样）低（仅苹果设备，版本集中）系统开放性开放（可Ro…...

编程日记 2025/5/3 8:07:55

spring中的@PostConstruct注解详解

基本概念 PostConstruct 是 Java EE 规范的一部分，后来也被纳入到 Spring 框架中。它是一个标记注解，用于指示一个方法应该在依赖注入完成后被自动调用。主要特点生命周期回调：PostConstruct 标记的方法会在对象初始化完成、依赖注入完成…...

编程日记 2025/5/3 8:05:51

大模型开发学习笔记

文章目录大模型基础大模型的使用大模型训练的阶段大模型的特点及分类大模型的工作流程分词化(tokenization)与词表映射大模型的应用进阶agent的组成和概念planning规划子任务分解ReAct框架 memory记忆Tools工具\工具集的使用langchain认知框架ReAct框架plan-and-Execute计划…...

编程日记 2025/5/3 8:05:51

【android Framework 探究】pixel 5 内核编译

相关文章： 【android Framework 探究】android 13 aosp编译全记录【android Framework 探究】android 13 aosp 全记录 - 烧录一，环境主机 -> Ubuntu 18.04.6 LTS 内存 -> 16GB 手机 -> pixel 5 代号redfin。kernel代号redbull 二&#xf…...

编程日记 2025/5/3 8:04:49

PowerBI实现点击空白处隐藏弹窗(详细教程）

PowerBI点击空白处隐藏弹窗第五届PowerBI可视化大赛中亚军作品:金融企业智慧经营分析看板有个功能挺好玩的：点击空白处隐藏弹窗，gif动图如下： 我们以一个案例分享下实现步骤： 第一步， 先添加一个显示按钮&#xff…...

编程日记 2025/5/3 8:04:48

【git】获取特定分支和所有分支

1 特定分支 1.1 克隆指定分支（默认只下载该分支） git clone -b <分支名> --single-branch <仓库URL> 示例（克隆某一个分支）： git clone -b xxxxxx --single-branch xxxxxxx -b ：指定分支…...

编程日记 2025/5/3 8:03:46

Windows配置grpc

Windows配置grpc 方法一1. 使用git下载grph下载速度慢可以使用国内镜像1.1 更新子模块 2. 使用Cmake进行编译2.1 GUI编译2.2 命令行直接编译 3. 使用Visual Studio 生成解决方法方法二1. 安装 vcpkg3.配置vckg的环境变量2. 使用 vcpkg 安装 gRPC3. 安装 Protobuf4. 配置 CMake…...

编程日记 2025/5/3 8:03:46

【学习笔记】深入理解Java虚拟机学习笔记——第2章 Java内存区域与内存溢出异常

第2章 Java内存区域与内存溢出异常 2.1 概述略 2.2 运行时数据区域 2.2.1 程序计数器线程私有，记录执行的字节码位置 2.2.2 Java 虚拟机栈线程私有，存储一个一个的栈帧，通过栈帧的出入栈来控制方法执行。 -栈帧：对应一个…...

编程日记 2025/5/3 8:02:43

数字智慧方案6189丨智慧应急综合解决方案（46页PPT）（文末有下载方式）

资料解读：智慧应急综合解决方案详细资料请看本解读文章的最后内容。在当前社会环境下，应急管理的重要性愈发凸显。国务院发布的《“十四五” 国家应急体系规划》以及 “十四五” 智慧应急专项规划，明确了应急管理体系建设的方向和重点&…...

编程日记 2025/5/3 8:01:41

解决 3D Gaussian Splatting 中 SIBR 可视化组件报错 uv_mesh.vert 缺失问题【2025最新版！】

一、📌 引言在使用 3D Gaussian Splatting（3DGS）进行三维重建和可视化的过程，SIBR_gaussianViewer_app 是一款官方推荐的本地可视化工具，允许我们在 GPU 上实时浏览重建结果。然而，许多用户在启动该工具时…...

编程日记 2025/5/3 8:01:38

见多识广4：Buffer与Cache，神经网络加速器的Buffer

目录前言传统意义上的Buffer与Cache一言以蔽之定义与主要功能BufferCache 数据存储策略二者对比神经网络加速器的bufferInput BufferWeight BufferOutput Buffer与传统buffer的核心区别总结前言知识主要由Qwen和Kimi提供，我主要做笔记。参考文献： …...

编程日记 2025/5/3 8:01:37

微服务中组件扫描(ComponentScan)的工作原理

微服务中组件扫描(ComponentScan)的工作原理你的问题涉及到Spring框架中ComponentScan的工作原理以及Maven依赖管理的影响。我来解释为什么能够扫描到common模块的bean而扫描不到其他模块的bean。根本原因关键在于**类路径(Classpath)**的包含情况： Maven依赖…...

编程日记 2025/5/3 8:00:36

C++之类和对象基础

⾯向对象三⼤特性：封装、继承、多态类和对象一.类的定义1. 类的定义格式2.类域二.实例化1.对象2.对象的大小三.this指针在 C 的世界里，类和对象构成了面向对象编程（Object-Oriented Programming，OOP）的核心框架&…...

编程日记 2025/5/3 8:00:36

【DIY小记】新手小白超频遇到黑屏问题解决分享

最近玩FPS游戏的时候，发现以前一顿操作超频之后的电脑，有一定概率会出问题。具体表现比如一种是，电脑显示器直接黑屏，所有键盘交互没有响应，只能直接重启电脑，还有一种是偶现卡顿，直接死机或者卡…...

编程日记 2025/5/3 8:00:35

虚幻引擎 IK Retargeter 编辑器界面解析

我来为您详细解释这段关于虚幻引擎IK Retargeter编辑器界面的文本，它描述了动画重定向系统的核心组件和工作原理。 Retarget Phases (重定向阶段) 这部分介绍了动画重定向过程中的三个关键计算阶段，每个阶段都可以单独启用或禁用，这对于调试…...

编程日记 2025/5/3 8:00:35

一、计算属性(computed)

1、计算属性的基本用法

2、计算属性与方法（methods）的详细区别

3、计算属性什么时候不能用？

二、监听属性

1、监听属性的基本用法（watch）

2、监听属性的参数与选项（高级用法）

3、watch vs watchEffect 的区别

1、 watchEffect() 如何简化上面的例子？

2、watchEffect() 的依赖跟踪原理（关键）：

3、watchEffect() 在实际场景中的优势：

优势一：自动跟踪多个数据源（不必手动指定）：

优势二：更精细地跟踪对象属性（比深监听高效）：

4、什么时候用 watch()？什么时候用 watchEffect()？

4、监听属性的常见使用场景

5、监听属性的注意事项

6、副作用清理

为什么需要副作用清理？

副作用清理函数 (onCleanup())

相关文章：

一、计算属性(`computed`)

1、 `watchEffect()` 如何简化上面的例子？

2、`watchEffect()` 的依赖跟踪原理（关键）：

`3、watchEffect()` 在实际场景中的优势：

4、什么时候用 `watch()`？什么时候用 `watchEffect()`？

副作用清理函数 (`onCleanup()`)