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

Vue学习笔记集--computed

news 来源：原创 2025/7/15 5:27:46

computed

在 Vue 3 的 Composition API 中，computed 用于定义响应式计算属性

它的核心特性是自动追踪依赖、缓存计算结果（依赖未变化时不会重新计算）

基本用法

1. 定义只读计算属性

import { ref, computed } from 'vue';const count = ref(0);
const doubleCount = computed(() => count.value * 2); // 返回一个 Ref 对象console.log(doubleCount.value); // 0 → 初始值
count.value = 2;
console.log(doubleCount.value); // 4 → 自动更新

2. 在模板中使用

<template><div>{{ doubleCount }}</div> <!-- 自动解包，无需 .value -->
</template>

`computed` 的响应式依赖

自动追踪依赖：计算属性会追踪其内部使用的所有响应式变量（如 ref 或 reactive）。
缓存机制：只有依赖变化时才会重新计算，否则直接返回缓存值。

const a = ref(1);
const b = ref(2);
const sum = computed(() => a.value + b.value);a.value = 3; // sum 自动重新计算 → 3 + 2 = 5
b.value = 4; // sum 再次计算 → 3 + 4 = 7

可写计算属性（Setter）

computed 可以接受一个包含 get 和 set 的对象，实现双向绑定：

const firstName = ref('John');
const lastName = ref('Doe');// 可写计算属性
const fullName = computed({get: () => `${firstName.value} ${lastName.value}`,set: (newValue) => {const [first, last] = newValue.split(' ');firstName.value = first;lastName.value = last;},
});// 修改计算属性
fullName.value = 'Jane Smith'; // 自动更新 firstName 和 lastName
console.log(firstName.value); // 'Jane'
console.log(lastName.value); // 'Smith'

与 `reactive` 结合使用

将计算属性绑定到 reactive 对象中：

import { reactive, computed } from 'vue';const state = reactive({price: 100,quantity: 2,
});// 计算总价
state.total = computed(() => state.price * state.quantity);console.log(state.total.value); // 200

性能优化：避免重复计算

计算属性会缓存结果，以下场景体现优势：

const list = ref([1, 2, 3, 4, 5]);// 计算过滤后的列表（只有 list 变化时重新计算）
const evenNumbers = computed(() => list.value.filter(num => num % 2 === 0));list.value.push(6); // evenNumbers 自动更新为 [2,4,6]

注意事项

避免副作用：计算属性应是纯函数，不要在其中修改外部状态。

// ❌ 错误示例（副作用）
const invalidComputed = computed(() => {count.value++; // 禁止修改依赖！return count.value;
});

依赖非响应式数据：如果依赖非响应式变量，计算属性不会更新：

let staticValue = 10;
const badComputed = computed(() => staticValue); // 不会更新！

性能敏感场景：复杂计算建议使用 computed 缓存结果，而非在模板中直接调用方法。

与 Vue 2 的对比

特性	Vue 2 的 `computed`	Vue 3 的 `computed`
定义位置	`computed` 选项	在 `setup` 中通过函数定义
返回值类型	直接通过属性访问	`Ref` 对象（需 `.value` 访问）
响应式依赖追踪	自动	自动
可写性	不支持 Setter	支持 Setter

完整示例

<template><div><input v-model="price" type="number" placeholder="价格"><input v-model="quantity" type="number" placeholder="数量"><p>总价: {{ total }}</p><button @click="resetTotal">重置总价</button></div>
</template><script setup>
import { ref, computed } from 'vue';const price = ref(0);
const quantity = ref(0);// 计算总价
const total = computed({get: () => price.value * quantity.value,set: (value) => {price.value = value / 2;quantity.value = 2;},
});// 通过 Setter 修改计算属性
const resetTotal = () => {total.value = 0; // 触发 Setter → price=0, quantity=0
};
</script>

Vue学习笔记集--computed

computed 在 Vue 3 的 Composition API 中，computed 用于定义响应式计算属性它的核心特性是自动追踪依赖、缓存计算结果（依赖未变化时不会重新计算） 基本用法 1. 定义只读计算属性 import { ref, computed } from vue;const count ref(…...

编程日记 2025/7/15 5:27:46

python之多线程,多进程理解

目录一,什么是多线程多进程 1,1 多线程 1.2 多进程二,多线程 2.1 使用threading模块三,多进程 3.1 使用multiprocessing模块 3.2 多进程的优势 3.3 进程间的通信四,如何选择多进程还是多线程五,异步编程的替代方案(协程) 在开发过程中，提升程序的并…...

编程日记 2025/7/11 18:21:47

3月29日星期六今日早报简报微语报早读

3月29日星期六，农历三月初一，早报#微语早读。 1、全国公立医疗机构自3月31日起全面停止收取门诊预交金； 2、永辉超市“胖东来调改店”已达47家店一线员工薪酬涨幅50%以上； 3、两孩家庭补10万，三孩家庭补20万&#…...

编程日记 2025/7/11 1:04:02

栈：隐匿于计算机科学长卷的璀璨明珠

目录 🚀前言🌟栈的概念🤔栈的两种实现形式💯数组栈实现💯链表栈实现 ⚙️数组栈与链表栈对比🐧递归与栈💻总结 🚀前言大家好！我是 EnigmaCoder。在计算机科学的宏大版图…...

编程日记 2025/7/14 23:05:02

【万字总结】前端全方位性能优化指南（七）——按需加载、虚拟列表、状态管理

现代框架高阶优化——突破复杂场景的性能临界点当Web应用进入「十万级组件、百万级数据」的复杂场景时，传统优化手段开始触及框架底层瓶颈：Redux的单一Store引发级联渲染风暴、全量加载的首屏资源阻塞关键交互、长列表滚动导致内存飙升直至页面崩溃……这些痛点正在倒逼框架…...

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

合并石子 | 第十四届蓝桥杯省赛JavaB组

在桌面从左至右横向摆放着 N 堆石子。每一堆石子都有着相同的颜色，颜色可能是颜色 0，颜色 1 或者颜色 2 中的其中一种。现在要对石子进行合并，规定每次只能选择位置相邻并且颜色相同的两堆石子进行合并。合并后新堆的相对位置保持不变&…...

编程日记 2025/7/9 8:00:26

【商城实战(94)】构建高并发的负载均衡与集群架构

【商城实战】专栏重磅来袭！这是一份专为开发者与电商从业者打造的超详细指南。从项目基础搭建，运用 uniapp、Element Plus、SpringBoot 搭建商城框架，到用户、商品、订单等核心模块开发，再到性能优化、安全加固、多端适配&#xf…...

编程日记 2025/7/14 12:48:11

鸿蒙开发：了解Canvas绘制

前言本文基于Api13 系统的组件无法满足我们的需求，这种情况下就不得不自己自定义组件，除了自定义组合组件，拓展组件，还有一种方式，那就是完全的自绘制组件，这种情况，常见的场景有，比…...

编程日记 2025/7/9 20:27:45

Ubuntu和Windows实现文件互传

1.开启Ubuntu下的FTP服务： （1）终端输入： sudo apt-get install vsftpd（2）安装完成后： 终端输入： /etc 是 Linux 系统的全局配置文件目录，存储系统和应用程序的配置信息…...

编程日记 2025/7/9 5:23:38

dav_pg8_vacuum

一、VACUUM基础概念 1.1 VACUUM的作用在PostgreSQL中，当数据被更新或删除时，系统并不会立即释放物理空间，而是将其标记为 “可重用”。随着时间推移，表中的死元组（已删除或已被新版本覆盖的数据）会越来越…...

编程日记 2025/7/9 1:05:29

革新汽车安全通信技术，美格智能全系车载通信模组支持NG-eCall

根据QYR（恒州博智）的统计及预测，2024年全球汽车无线紧急呼叫（eCall）设备市场销售额达到了25.17亿美元，预计2031年将达到44.97亿美元，年复合增长率（CAGR 2025-2031）为8.8%…...

编程日记 2025/7/11 1:09:57

Ubuntu桌面环境下网络设置选项缺失问题解决

一、问题现象在Ubuntu桌面环境中，网络设置界面中仅显示VPN设置，未显示常规网络配置选项，导致无法通过图形界面修改网络配置。但通过命令行工具可正常设置网络。二、解决方案 （一）检查网络设备状态 nmcli d 发现…...

编程日记 2025/7/15 1:34:23

GitHub绑定本地计算机以及仓库创建跟推送指南

GitHub绑定到本地计算机要在本地计算机上连接到你的GitHub账户，可以通过以下步骤实现： 1. 检查和安装Git 确保你的计算机上已经安装了Git。如果还没有安装，可以从Git官网下载并安装。 2. 配置Git 打开终端（macOS或Linux&…...

编程日记 2025/7/5 1:27:20

【数据结构】导航

【数据结构】-CSDN博客【数据结构】next数组、nextval数组-CSDN博客...

编程日记 2025/7/15 5:25:46

Java内存中的Heap（堆）的作用

Java内存中的Heap（堆）的作用在 Java 的内存模型中，Heap（堆） 是 JVM（Java Virtual Machine）管理的运行时数据区域之一，主要用于存储程序运行过程中动态分配的对象和数据。它是 Java…...

编程日记 2025/7/10 18:39:46

Python控制结构详解

前言一、控制结构概述二、顺序结构三、选择结构（分支结构） 1. 单分支 if 2. 双分支 if-else 3. 多分支 if-elif-else 4.实际应用: 四、循环结构 1. for循环 2. while循环 3. 循环控制语句五、异常处理（try-except&#xff09…...

编程日记 2025/7/10 19:20:38

2023第十四届蓝桥杯大赛软件赛国赛C/C++ 大学 B 组(真题题解)（C++/Java题解）

本来想刷省赛题呢，结果一不小心刷成国赛了真是个小迷糊〒▽〒但，又如何( •̀ ω •́ )✧ 记录刷题的过程、感悟、题解。希望能帮到，那些与我一同前行的，来自远方的朋友😉 大纲： 一、子2023-&#xff…...

编程日记 2025/7/12 21:21:16

JVM介绍

JVM类加载器栈指令重排序类的JVM内存分配堆内存GC模型...

编程日记 2025/6/28 4:05:57

HTML输出流

HTML 输出流 JavaScript 中**「直接写入 HTML 输出流」**的核心是通过 document.write() 方法向浏览器渲染过程中的数据流动态插入内容。以下是详细解释： 一、HTML 输出流的概念 1. 动态渲染过程 HTML 文档的加载是自上而下逐行解析的。当浏览器遇到 <script&…...

编程日记 2025/7/10 5:10:59

Kafka 的高可用性

Kafka 的高可用性主要通过副本机制、ISR（In-Sync Replicas）列表和控制器 Broker 来实现。这些机制共同确保了 Kafka 集群在部分节点故障时仍然可以正常运行，数据不会丢失，并且服务不会中断。 1. 副本机制 Kafka 的副本机制是其高…...

编程日记 2025/7/15 5:04:23

Centos7，tar包方式部署rabbitmq-3.7.6

1. 环境准备安装编译工具和依赖包 yum -y install make gcc gcc-c glibc-devel m4 perl openssl openssl-devel ncurses-devel ncurses-devel xz xmlto perl 2. Erlang环境搭建版本对应：https://www.rabbitmq.com/docs/which-erlang 解压到指定目录 tar -xv…...

编程日记 2025/7/10 16:04:08

RISC-V AIA学习3---APLIC 第二部分(APLIC 中断域的内存映射控制区域)

每个中断域都有一个专用的内存映射控制区域，用来处理该中断域的中断。控制区域的大小是 4KB 的倍数，对齐到 4KB 边界。最小的有效控制区域是 16KB。 1. 控制区域的基本结构：部门文件柜每个中断域就像公司的一个部门，有自己的 …...

编程日记 2025/7/10 4:33:43

顶刊【遥感目标检测】【TGRS】FFCA-YOLO遥感图像小目标检测

FFCA-YOLO for Small Object Detection in Remote Sensing Images FFCA-YOLO遥感图像小目标检测 0.论文摘要摘要——特征表征不足、背景干扰等问题使得遥感图像中的小目标检测任务极具挑战性。尤其在算法需部署于星载设备进行实时处理时，需在有限计算资源下对精度…...

编程日记 2025/7/9 1:35:48

【人工智能】从 Llama 到 DeepSeek：开源大模型的演进与技术对比

《Python OpenCV从菜鸟到高手》带你进入图像处理与计算机视觉的大门！解锁Python编程的无限可能：《奇妙的Python》带你漫游代码世界随着人工智能的迅猛发展，开源大语言模型（LLM）在自然语言处理领域扮演着越来越重要的角色。本文从 Meta 的 Llama 系列开始，追溯开源大模…...

编程日记 2025/7/15 4:30:34

【PCB工艺】时序图（Timing Diagram）

时序图（Timing Diagram）是描述数字电路信号随时间变化的图示，广泛用于分析和设计时序逻辑电路，如锁存器（Latch）、触发器（Flip-Flop）、计数器、状态机等。这篇文章从时序图的原理、构…...

编程日记 2025/7/8 19:58:59

MATLAB 中，并行池（Parallel Pool）自动关闭的情况

在 MATLAB 中，并行池（Parallel Pool）的行为可以通过设置进行控制，但默认情况下，并行池不会自动关闭，除非满足某些条件或显式调用关闭命令。以下是关于并行池自动关闭机制的详细说明： 自动关闭的…...

编程日记 2025/7/12 9:43:48

[网安工具] SQL 注入自动探测工具 —— SQLMAP 使用手册

🌟想了解其它网安工具？看看这个：[网安工具] 网安工具库 —— 工具管理手册 https://github.com/sqlmapproject/sqlmaphttps://github.com/sqlmapproject/sqlmap用法 | sqlmap 用户手册https://sqlmap.highlight.ink/usage 0x01：S…...

编程日记 2025/7/9 10:31:13

Python数据结构与算法-基础预热篇

目录语言基础 1.内置函数 1.1math库 1.2collections 1.2.1Counter：计数器 1.2.2deque双端对列 1.2.3defaultdict有默认值的字典 1.3heapq堆（完全二叉树） 1.4functool 1.5itertools 1.5.1无限迭代器 1.5.2有限迭代器 1.5.3排列组合迭代器 2.序…...

编程日记 2025/7/15 5:07:31

构建可扩展、可靠的网络抓取、监控和自动化应用程序的终极指南

大家好，这里是架构资源栈！点击上方关注，添加“星标”，一起学习大厂前沿架构！ 无论您是企业主、营销人员还是软件开发人员，您都很有可能在某个时候使用过 Web 自动化工具。每个人都希望更聪明地工作&#xf…...

编程日记 2025/7/10 4:57:22

【蓝桥杯】重点冲刺

【最高优先级】必考核心算法（占分60%以上）动态规划（DP） 🌟🌟🌟 背包问题：01背包、完全背包（必须掌握空间优化的一维写法）线性DP：最长上升子序列（LIS）、最长公共子序列（LCS）路径问题：网格路径计数（含障碍物）、最小路径和经典模型：打家劫舍、股票买卖问…...

编程日记 2025/7/9 7:14:07

质量工程师的2025：从“找bug“到“造质量“的职业进化

想象一下，2025年的某天：阅读原文早晨，AI测试助手已经自动运行了夜间回归测试，并将可疑问题标记出来你喝着咖啡，通过质量数据看板分析系统健康度下午的会议上，你正用业务语言向产品经理解释&#xff1a…...

编程日记 2025/7/9 18:25:33

2025年CNG 汽车加气站操作工题目分享

CNG 汽车加气站操作工题目分享： 单选题 1、CNG 加气站中，加气机的加气软管应（ ）进行检查。 A. 每天 B. 每周 C. 每月 D. 每季度答案：A 解析：加气软管是加气操作中频繁使用的部件，每天检…...

编程日记 2025/7/8 5:19:19

【QT5 多线程示例】线程池

线程池【C并发编程】（九）线程池 QThreadPool 和 QRunnable 是 Qt 提供的线程池管理机制。QRunnable 是一个任务抽象类；定义任务逻辑需要继承QRunnable 并实现 run() 方法。QThreadPool 负责管理线程，并将 QRunnable 任务分配到…...

编程日记 2025/7/14 12:10:47

飞致云荣获“Alibaba Cloud Linux最佳AI镜像服务商”称号

2025年3月24日，阿里云云市场联合龙蜥社区发布“2024年度Alibaba Cloud Linux最佳AI镜像服务商”评选结果。经过主办方的严格考量，飞致云（即杭州飞致云信息科技有限公司）凭借旗下MaxKB开源知识库问答系统、1Panel开源面板、Halo开…...

编程日记 2025/7/13 11:25:55

FAST-LIVO2 Fast, Direct LiDAR-Inertial-Visual Odometry论文阅读

FAST-LIVO2 Fast, Direct LiDAR-Inertial-Visual Odometry论文阅读论文下载论文翻译FAST-LIVO2: 快速、直接的LiDAR-惯性-视觉里程计摘要I 引言II 相关工作_直接方法__LiDAR-视觉（-惯性）SLAM_ III 系统概述IV 具有顺序状态更新的误差状态迭代卡尔曼滤波…...

编程日记 2025/7/15 1:14:22

kubesphere 终端shell连不上的问题

使用nginx代理kubesphere控制台会出现容器的终端shell连不上的问题下面是一个样例配置可以解决这个问题： 注意修改为你的ip地址： upstream k8s { ip_hash; server masterip1:30880; server masterip2:30880; server masterip3:30880; } nginx.conf #…...

编程日记 2025/7/11 18:43:27

无人机，雷达定点飞行时，位置发散，位置很飘，原因分析

参考： 无人车传感器 IMU与GPS数据融合进行定位机制_gps imu 组合定位原始数-CSDN博客我的无人机使用雷达定位，位置模式很飘雷达的更新频率也是10HZ， 而px飞控的频率是100HZ，没有对两者之间的频率差异做出处理所以才导致无人…...

编程日记 2025/7/10 5:50:26

外星人入侵（python设计小游戏）

这个游戏简而言之就是操作一个飞机对前方的飞船进行射击，和一款很久之前的游戏很像，这里是超级低配版那个游戏，先来看看效果图： 由于设计的是全屏的，所以电脑不能截图。。。。下面的就是你操控的飞船，上面…...

编程日记 2025/7/12 10:49:42

Stereolabs ZED Box Mini：NVIDIA Orin™驱动，双GMSL2输入，智能机器视觉AI新选择”

Stereolabs近日推出了ZED Box Mini，这是一款专为视觉AI设计的紧凑型迷你电脑（ECU）。该产品搭载了NVIDIA Orin™系列处理器，具备强大的AI视觉处理能力，适用于机器人、智能基础设施和工业应用等多种场景。ZED Box Mini以…...

编程日记 2025/7/13 12:38:49

IP协议的介绍

网络层的主要功能是在复杂的网络环境中确定一个合适的路径.网络层的协议主要是IP协议.IP协议头格式如下: 1.4位版本号:指定IP协议的版本,常用的是IPV4,对于IPV4来说,这里的值就是4. 2.4位头部长度,单位也是4个字节,4bit表示的最大数字是15,因此IP头部的最大长度就是60字节 3.…...

编程日记 2025/7/14 10:12:46

【入门初级篇】布局类组件的使用（2）

【入门初级篇】布局类组件的使用（2） 视频要点 （1）2分栏场景介绍与实操演示 （2）3分栏场景介绍与实操演示点击访问myBuilder产品运营平台 CSDN站内资源下载myBuilder 交流请加微信：MyBuilder8…...

编程日记 2025/7/14 9:02:17

高并发金融系统，“可观测-可追溯-可回滚“的闭环审计体系

一句话总结在高并发金融系统中，审计方案设计需平衡"观测粒度"与"系统损耗"，通过双AOP实现非侵入式采集，三表机制保障操作原子性，最终形成"可观测-可追溯-可回滚"的闭环体系。业务痛点与需求在…...

编程日记 2025/7/7 23:32:00

（九）Spring Webflux

底层基于Netty实现的Web容器与请求/响应处理机制参照：Spring WebFlux :: Spring Frameworkhttps://docs.spring.io/spring-framework/reference/6.0/web/webflux.html 一、组件对比 API功能 Servlet-阻塞式Web WebFlux-响应式Web 前端控制器 DispatcherServl…...

编程日记 2025/7/14 18:33:53

如何在Webpack中配置别名路径？

如何在Webpack中配置别名路径？ 文章目录如何在Webpack中配置别名路径？1. 引言2. 配置别名路径的基本原理3. 如何配置别名路径3.1 基本配置3.2 结合Babel与TypeScript3.2.1 Babel配置3.2.2 TypeScript配置 3.3 适用场景与最佳实践 4. 调试与常见问题4.1 …...

编程日记 2025/7/14 0:59:23

office_word中使用宏以及DeepSeek

前言 Word中可以利用DeepSeek来生成各种宏，从而生成我们需要各种数据和图表，这样可以大大减少我们手工的操作。 1、Office的版本采用的是微软的office2016，如下图： 2、新建一个Word文档 3、开启开发工具这样菜单中的“开发工具…...

编程日记 2025/7/7 20:52:50

利用GitHub Pages快速部署前端框架静态网页

文章目录前言GitHub Pages 来部署前端框架（Vue 3 Vite）项目1、配置 GitHub Pages 部署2、将项目推送到 GitHub3、部署到 GitHub Pages4、访问部署页面5、修改代码后的更新部署顺序前言可以先参考： 使用 GitHub Pages 快速部署静态网页: …...

编程日记 2025/7/9 4:35:06

前端性能优化思路_场景题

20 万人同时在直播间打赏，前端优化需要考虑高并发、性能优化、流畅体验等问题，涉及 WebSocket 处理、消息去抖、虚拟列表优化、动画优化、CDN 加速等多个方面。 WebSocket 高并发优化 （1）使用 WebSocket 替代轮询轮询&#xf…...

编程日记 2025/7/14 9:15:22

45 55跳跃游戏解题记录

先是55跳跃游戏，暴力解法会怎样？会超出时间限制，而且有很多细节要注意： func canJump(nums []int) bool {// 处理空数组情况，当nums只剩一个元素时，nums[i:]导致越界。if len(nums) 0 {return false}// 如…...

编程日记 2025/7/10 21:07:26

一个简单的用C#实现的分布式雪花ID算法

雪花ID是一个依赖时间戳根据算法生成的一个Int64的数字ID，一般用来做主键或者订单号等。以下是一个用C#写的雪花ID的简单实现方法 using System; using System.Collections.Concurrent; using System.Diagnostics;public class SnowflakeIdGenerator {// 配置常量p…...

编程日记 2025/7/11 14:10:34

16个气象数据可视化网站整理分享

好的！以下是关于“16个气象数据可视化网站整理分享”的软文： 16个气象数据可视化网站整理分享气象数据可视化已成为现代气象研究、决策支持以及公众天气服务的重要组成部分。从天气预报到气候变化监测，全球许多气象数据可视化平台为专业人士…...

编程日记 2025/7/11 18:25:12