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

Vue3学习（组合式API——计算属性computed详解）

news 来源：原创 2025/6/28 16:03:12

目录

一、计算属性computed。

Vue官方提供的案例。(普通写法与计算属性写法)

使用计算属性computed重构——>简化描述响应式状态的复杂逻辑。

（1）计算属性computed小案例。

<1>需求说明。（筛选原数组——>得新数组）

<2>计算属性基本语法。

<3>代码示例。

<4>响应式依赖更新，才会重新更新计算属性。

（2）计算属性可支持getter、settter创建。(默认只读)

<1>只读计算属性。

<2>提供 getter 和 setter 创建可写计算属性。

（3）"计算属性缓存" vs "方法(函数)"。

（4）计算属性computed的最佳实践。

一、计算属性computed。

官方解释：使用计算属性来描述依赖响应式状态的复杂逻辑。

Vue官方提供的案例。(普通写法与计算属性写法)

向上面必须认真看好一会儿才能明白它的计算依赖于author.books。更重要的是，如果在模板中需要不止一次这样的计算，就需要将这样的代码在模板里重复好多遍。

使用计算属性computed重构——>简化描述响应式状态的复杂逻辑。

（1）计算属性computed小案例。

<1>需求说明。（筛选原数组——>得新数组）

<2>计算属性基本语法。

const 计算属性 = computed(()=>{..return计算返回的结果..})。

<3>代码示例。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div id="app"><div>原始数据：{{list}}</div><div>=================================</div><div>计算属性数据：{{computedList}}</div></div><script type="module">import { createApp, ref, computed } from './vue.esm-browser.js'createApp({setup() {const list = ref([1, 2, 3, 4, 5, 6, 7, 8])//基于list派生一个计算属性，从list中过滤出>2const computedList = computed(() => {return list.value.filter(item => item > 2)})return {list,computedList}}}).mount('#app')</script></body></html>

效果如下。

<4>响应式依赖更新，才会重新更新计算属性。

当响应式依赖原始数组对象list更新，计算属性会跟着动态更新。
代码示例。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div id="app"><div>原始数据：{{list}}</div><button @click="changeList">更新list</button><div>=================================</div><div>计算属性数据：{{computedList}}</div></div><script type="module">import { createApp, ref, computed } from './vue.esm-browser.js'createApp({setup() {const list = ref([1, 2, 3, 4, 5, 6, 7, 8])//基于list派生一个计算属性，从list中过滤出>2const computedList = computed(() => {return list.value.filter(item => item > 2)})//修改数组list的方法const changeList = () => {//点击一次按钮，添加一个666list.value.push(666)}return {list,computedList,changeList}}}).mount('#app')</script></body></html>

效果如下。

（2）计算属性可支持getter、settter创建。(默认只读)

官方解释。

<1>只读计算属性。

代码示例。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div id="app"><div>原始数据：{{count}}</div><div>=================================</div><div>计算属性数据：{{countComputed}}</div></div><script type="module">import { createApp, ref, computed } from './vue.esm-browser.js'createApp({setup() {const count = ref(1)const countComputed = computed(() => {return count.value + 1})return {count,countComputed}}}).mount('#app')</script></body></html>

效果如下。

尝试直接修改计算属性。（出现错误不生效）

<2>提供 getter 和 setter 创建可写计算属性。

代码示例。（根据官方文档的语法格式书写）
具体的过程计算可以看注释！

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div id="app"><div>原始数据：{{count}}</div> <!-- count的计算过程：1-2=-1 --><div>=================================</div><div>计算属性数据：{{countComputed}}</div> <!-- countComputed的计算过程：1-2+1=0 --></div><script type="module">import { createApp, ref, computed } from './vue.esm-browser.js'createApp({setup() {const count = ref(1)const countComputed = computed({get() { return count.value + 1 },set(newValue) { return count.value = newValue - 2 }})countComputed.value = 1console.log('set调用：' + count.value)return {count,countComputed}}}).mount('#app')</script></body></html>

效果如下。

（3）"计算属性缓存" vs "方法(函数)"。

官方解释：计算属性值会基于其响应式依赖被缓存。
为什么需要缓存呢？想象一下我们有一个非常耗性能的计算属性 list，需要循环一个巨大的数组并做许多计算逻辑，并且可能也有其他计算属性依赖于 list。没有缓存的话，我们会重复执行非常多次 list 的 getter，然而这实际上没有必要！如果你确定不需要缓存，那么也可以使用方法(函数)调用。

代码示例。(函数aaa与计算属性bbb的调用对比)
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div id="app"><div>调用1次方法(函数)aaa{{aaa()}}<br>调用2次方法(函数)aaa{{aaa()}}<br>调用3次方法(函数)aaa{{aaa()}}<div>=========================</div>调用1次计算属性{{bbb}}<br>调用2次计算属性{{bbb}}<br>调用3次计算属性{{bbb}}</div></div><script type="module">import { createApp, computed } from '/vue.esm-browser.js'createApp({setup() {const aaa = () => {console.log('aaaa函数')}const bbb = computed(() => {console.log('bbb计算属性')})return {aaa,bbb}}}).mount('#app')</script>
</body></html>
效果如下。

（4）计算属性computed的最佳实践。

官方解答与个人小结。

Vue3学习（组合式API——计算属性computed详解）

目录一、计算属性computed。 Vue官方提供的案例。(普通写法与计算属性写法) 使用计算属性computed重构——>简化描述响应式状态的复杂逻辑。 （1）计算属性computed小案例。 <1>需求说明。（筛选原数组——>得新数组） &…...

编程日记 2025/6/28 16:03:12

高海拔和远距离的人员识别：面部、体型和步态的融合

大家读完就觉得有帮助记得关注和点赞！！！ 摘要我们解决了在无约束环境中进行全身人体识别的问题。这个问题出现在诸如IARPA高空和远距离生物识别与身份识别（BRIAR）计划等监视场景中，其中生物识别数据是在长…...

编程日记 2025/6/27 17:22:25

《P2345 [USACO04OPEN] MooFest G》

题目背景 P5094 [USACO04OPEN] MooFest G 加强版题目描述约翰的 n 头奶牛每年都会参加“哞哞大会”。哞哞大会是奶牛界的盛事。集会上的活动很多，比如堆干草，跨栅栏，摸牛仔的屁股等等。它们参加活动时会聚在一起，第 i 头…...

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

浅浅学:DoIP工作流程及基于DoIP的诊断/刷写工具

注：阅读本文需要对UDS及BootLoader有一定了解，基础内容不做赘述。在汽车"新四化"浪潮的推动下，智能座舱、自动驾驶、车路协同等创新技术正加速重构行业格局。随着车载ECU数量突破百个量级，软件代码量呈指数级增长——…...

编程日记 2025/6/28 15:55:22

首个专业AI设计Agent发布-Lovart

Lovart是什么 Lovart 是为设计师打造的世界上首个专业设计 Agent。Lovart 能像专业设计师一样思考和执行设计任务，提供高水平的设计方案。基于自然语言交互，用户能快速调整布局、颜色和构图。Lovart 支持从创意拆解到专业交付的全链路设计，单…...

编程日记 2025/6/26 18:16:28

二叉树(中序遍历)

嘿，欢迎来到小巫blog！小巫又来啦！看到你对二叉树中序遍历这道题有点困惑，别担心，我会一步步带你搞定它！这道题是树的基础题目，掌握了它，你对树的遍历就会有很深的理解。我相信&#…...

编程日记 2025/6/28 16:00:02

Ubuntu 系统默认已安装 python，此处只需添加一个超链接即可

步骤 1：确认 Python 3 的安装路径查看当前 Python 3 的路径： which python3 输出类似： /usr/bin/python3 步骤 2：创建符号链接使用 ln -s 创建符号链接，将 python 指向 python3： sudo ln -s /usr/b…...

编程日记 2025/6/26 7:23:36

AcroForm JavaScript Promise 对象应用示例: 异步加载PDF文件

这段代码演示了在Adobe Acrobat DC Pro 的 JavaScript 环境中如何使用 Promise 对象处理异步操作。具体功能是： 定义了一个loadFile函数，模拟异步加载PDF文件的操作使用Promise对象封装异步操作，提供成功(resolve)和失败(reject)两种状态通过…...

编程日记 2025/6/20 14:16:32

LeetCode 热题 100 114. 二叉树展开为链表

LeetCode 热题 100 | 114. 二叉树展开为链表大家好，今天我们来解决一道经典的二叉树问题——二叉树展开为链表。这道题在 LeetCode 上被标记为中等难度，要求将二叉树展开为一个单链表，展开后的单链表应该与二叉树的先序遍历顺序相同。问题…...

编程日记 2025/6/27 21:03:19

DML和DQL

1. 设置MySQL的储存引擎上一章的附录里已经将ini设置好了，不用再次设置 2. DML语句插入单数据记录插入多数据记录将查询结果插入新表更新数据删除数据注意：delete删除只会删除数据，不会重置表的现有逻辑，truncate会重置表逻…...

编程日记 2025/6/28 15:47:38

多线程与线程互斥

我们初步学习完线程之后，就要来试着写一写多线程了。在写之前，我们需要继续来学习一个线程接口——叫做线程分离。默认情况下，新创建的线程是joinable的，线程退出后，需要对其进行pthread_join操作，否则无法…...

编程日记 2025/6/27 14:13:12

BMS工具箱用来执行贝叶斯模型平均（BMA）计算模块

贝叶斯模型平均（Bayesian Model Averaging，BMA）是一种用于处理模型不确定性的统计方法，通过结合多个模型的预测结果来提高预测的准确性和鲁棒性。在 MATLAB 中，可以使用专门的工具箱（如 BMS 工具箱&#xf…...

编程日记 2025/6/21 19:35:21

Java死锁排查：线上救火实战指南

想象一下，你正在值班，突然监控告警红成一片，用户反馈雪花般飘来：“系统卡死了！用不了了！” —— 这很可能就是Java应用遭遇了“死锁”这个大魔王。这时候，你就是救火队长，首要任务不…...

编程日记 2025/6/25 18:06:25

第十九次博客打卡

今天学习的内容是Java中的常见循环。在 Java 中，常见的循环结构主要有以下几种：for 循环、while 循环、do-while 循环以及增强型 for 循环（也称为 for-each 循环）。 1. for 循环 for 循环是一种非常灵活的循环结构&#xff0c…...

编程日记 2025/6/25 22:58:36

智能体制作学习笔记1——智能体

01 智能体_哔哩哔哩_bilibili 大语言模型可以理解成一个很厉害的人。但是要完成一些特定的工作，除了大语言模型，还需要一些工具和业务流程，这样才能自动化帮我们完成特定的工作，这个就叫做智能体。突然发现放视频的时候出现了…...

编程日记 2025/6/26 4:25:54

Python常见问题

文章目录 1.python有哪些数据类型2.python中的元组和列表的区别是什么？3.python中的break、continue、pass代表什么意思？4.如何在python中生成一个随机数？5.Python有哪些常见的内置函数？6.请用自己最擅长的编程语言，将…...

编程日记 2025/6/22 20:55:29

小程序存存上下滑动的页面

推荐阅读文档： Vue3组合式API之getCurrentInstance详解 - 且行且思 - 博客园Vue2中，可以通过this来获取当前组件实例； Vue3中，在setup中无法通过this获取组件实例，console.log(this)打印出来的值是undefined。在Vue3…...

编程日记 2025/6/26 17:32:16

更换git位置并在pycharm中重新配置

更新 PyCharm 中的 Git 路径更新 PyCharm 终端的 Shell 路径检查环境变量确保系统环境变量中的 Path 包含了新的 Git 安装路径 ，如果使用unins0000自动卸载就不会有旧路径。...

编程日记 2025/6/26 4:23:36

AI世界的崩塌：当人类思考枯竭引发数据生态链断裂

AI世界的崩塌：当人类思考枯竭引发数据生态链断裂 ——论过度依赖AI创作对技术进化的反噬一、数据生态的恶性循环：AI的“自噬危机” 当前AI模型的训练依赖于人类创造的原始数据——书籍、论文、艺术作品、社交媒体动态等。据统计，2025年全球…...

编程日记 2025/6/27 1:18:50

OkHttp连接池

🧰 调整连接池的核心参数 ✅ 最大空闲连接数（maxIdleConnections）： 含义：连接池中最多保留的空闲连接数量。默认值：5建议值：10~50（视并发量而定） ✅ 连接保持时间&…...

编程日记 2025/6/20 10:56:27

哈希表的实现01

文章目录哈希表的实现01哈希概念直接定址法哈希冲突负载因子将关键字转换为整数哈希函数除法散列法：乘法散列法（了解）全域散列法（了解） 处理哈希冲突（开放定址法）线性探测：二次探测…...

编程日记 2025/6/27 2:31:54

学习日志06 java

还有四天要去比赛了，能赢吗？逼自己一把。。。！！加油！ 1 对比一下java重写还是不重写tostring的区别 1. 不重写 toString() 的情况 java class Point {private int x;private int y;public Point(int x, int y) {th…...

编程日记 2025/6/23 13:55:14

spring中的@MapperScan注解详解

一、核心功能与作用 MapperScan是Spring与MyBatis框架集成时用于批量扫描Mapper接口的核心注解，其主要功能包括： 自动注册Mapper接口通过指定包路径，Spring会自动扫描该路径下的所有Mapper接口，并将其注册为Spring Bean&#x…...

编程日记 2025/6/26 18:49:23

PYTHON训练营DAY25

BUG与报错一、try else try:# 可能会引发异常的代码 except ExceptionType: # 最好指定具体的异常类型，例如 ZeroDivisionError, FileNotFoundError# 当 try 块中发生 ExceptionType 类型的异常时执行的代码 except: # 不推荐：捕获所有类型的异常&…...

编程日记 2025/6/27 14:44:19

视频图像压缩领域中 DCT 的 DC 系数和 AC 系数详解

引言在数字图像与视频压缩领域，离散余弦变换（Discrete Cosine Transform, DCT）凭借其卓越的能量集中特性，成为JPEG、MPEG等国际标准的核心技术。DCT通过将空域信号映射到频域，分离出DC系数（直流分量&…...

编程日记 2025/6/26 21:28:08

YOLO v1：目标检测领域的革命性突破

引言在计算机视觉领域，目标检测一直是一个核心任务，它不仅要识别图像中的物体类别，还要确定物体的精确位置。传统目标检测方法如R-CNN系列虽然准确率高，但计算复杂度高、速度慢。2016年，Joseph Redmon等人提出的YOLO…...

编程日记 2025/6/26 18:30:05

AI智能体 | 使用Coze一键制作“假如书籍会说话”视频，18个作品狂吸17.6万粉，读书博主新标杆！（附保姆级教程）

目录一、整体工作流设计二、制作工作流 2.1 开始节点 2.2 大模型_生成对话文案 2.3 代码_字幕切割 2.4 画板_对话背景 2.5 循环_对话语音01 2.5.1 选择器_2 2.5.2 语音合成02 2.5.3 语音合成03 2.5.4 变量聚合_1 2.5.5 视频合成01 2.6 循环_3 2.6.1 选择器_3 …...

编程日记 2025/6/26 11:14:13

HVV蓝队实战面试题

HVV蓝队实战，防守筹备之“部署蜜罐捕获横向扫描行为”。蜜罐通过模拟内网脆弱服务（如SMB、SSH、数据库端口），诱捕攻击者突破边界后的横向探测行为。通过监测高频端口扫描、非常规协议请求及非授权IP段遍历，结合多源…...

编程日记 2025/6/23 22:39:24

正则表达式（二）-高级应用_谨慎使用

没事建议别瞎用正则表达式，能让后端处理好的数据，尽量后端处理好，减少前端对数据的处理，保证数据原始的完整性，减少前端耗能。（其实就是懒╮(╯▽╰)╭） 1. 分组捕获分组捕获用于提取匹配的子字符串，使用 () 定义分组。示例：提取日期中的年、月、日 (\d{4})-(\d{2…...

编程日记 2025/6/23 19:32:33

在K8S集群中部署EFK日志收集

目录引言环境准备安装自定义资源部署ElasticsearchMaster 节点与 Data 节点的区别生产优化建议安装好以后测试ES是否正常部署Fluentd测试filebeat是否正常推送日志部署Kibana获取账号密码，账号是：elastic集群测试引言系统版本为 Centos7.9内核版本为…...

编程日记 2025/6/26 17:28:03

解决常见数据库问题：保障数据安全与稳定的全方位指南

本文结合行业最佳实践与前沿技术，系统性总结数据库运维中的核心问题与解决方案，助力开发者构建高可靠、高性能的数据服务） 一、性能优化：从SQL到架构的全面调优性能问题是数据库运维中最常见的挑战，直接影响用户体验…...

编程日记 2025/6/25 4:34:58

武汉科技大学人工智能与演化计算实验室许志伟课题组参加2025中国膜计算论坛

武汉科技大学人工智能与演化计算实验室许志伟课题组参加2025中国膜计算论坛 2025年5月9日至11日，第五届中国膜计算论坛（CWMC 2025）在成都信息工程大学隆重召开。会议由国际膜计算学会（IMCS） 主办，汇聚了来…...

编程日记 2025/6/27 20:59:11

Femap许可硬件绑定

在电磁仿真领域，Femap软件因其卓越的性能和广泛的应用场景而备受用户青睐。为了确保软件的安全与稳定运行，Femap提供了许可硬件绑定的功能。本文将详细介绍Femap许可硬件绑定的概念和优势，帮助您了解并充分利用这一功能，确保软件在…...

编程日记 2025/6/27 16:08:48

构建优雅对象的艺术：Java 建造者模式的架构解析与工程实践

一、建造者模式的本质与核心价值在面向对象的软件设计中，创建复杂对象一直是一个需要精心处理的问题。当一个对象的构建需要多个步骤，并且这些步骤具有不同的组合方式时，传统的构造函数方式会显得力不从心。建造者模式（Builder …...

编程日记 2025/6/21 19:17:34

vim启动的时候，执行gg

在 Vim 编辑器中，gg 命令是一个非常有用的命令，它可以将光标快速移动到当前窗口的顶部（即第一行）。如果你想在 Vim 启动时自动执行 gg 命令，有几种方法可以实现这一点： 方法 1：使用 Vim 的启动…...

编程日记 2025/6/23 21:50:54

【SSL部署与优化】HTTP/2与HTTPS的协同效应

HTTP/2与HTTPS的协同效应：为何HTTP/2强制要求TLS 1.2？ HTTP/2是HTTP协议的现代升级版，旨在通过多路复用、头部压缩等技术提升性能。然而，HTTP/2的设计与部署与HTTPS（TLS加密）紧密相关，甚至强制…...

编程日记 2025/6/23 18:55:55

JavaScript篇：揭秘函数式与命令式编程的思维碰撞

大家好，我是江城开朗的豌豆，一名拥有6年以上前端开发经验的工程师。我精通HTML、CSS、JavaScript等基础前端技术，并深入掌握Vue、React、Uniapp、Flutter等主流框架，能够高效解决各类前端开发问题。在我的技术栈中，除了…...

编程日记 2025/6/23 1:34:10

ubuntu24.04上安装NVIDIA driver+CUDA+cuDNN+Anaconda+Pytorch

一、NVIDIA driver 使用Ubuntu系统的：软件和更新——>附加驱动，安装NVIDIA驱动。二、CUDA 安装命令：sudo apt install nvidia-cuda-toolkit 三、cuDNN cuDNN 9.10.0 Downloads | NVIDIA Developer 四、Anaconda Download Anaconda Di…...

编程日记 2025/6/26 17:44:31

vue3基础学习(上) [简单标签] (vscode)

目录 1. Vue简介 2. 创建Vue应用 2.1 下载JS文件 2.2 引用JS文件 2.3 调用Vue方法编辑 2.4 运行一下试试: 2.5 代码如下 3.模块化开发模式 3.1 Live Server插件 3.2 运行 4. 常用的标签 4.1 reactive 4.1.1 运行结果 4.1.2 代码: 4.2 ref 4.2.1 运行结果 4.2.2…...

编程日记 2025/6/21 6:02:43

.Net HttpClient 使用代理功能

HttpClient 使用代理功能实际开发中，HttpClient 通过代理访问目标服务器是常见的需求。本文将全面介绍如何在 .NET 中配置 HttpClient 使用代理（Proxy）功能，包括基础使用方式、代码示例、以及与依赖注入结合的最佳实践。注意…...

编程日记 2025/6/27 18:52:54

深入理解Java适配器模式：从接口兼容到设计哲学

引言：接口不兼容的困局在软件开发中，我们经常遇到这样的场景： 旧系统有一个「RS232串口设备」（仅支持sendByRS232(String data)方法），新系统需要通过「USB接口」（要求sendByUSB(String data)…...

编程日记 2025/6/24 22:47:36

非异步信号安全函数

这个程序演示了如何使用sigaction来捕获和处理信号（特别是SIGINT，即CtrlC）。以下是关键点和潜在问题的分析： 程序功能信号捕获：注册自定义处理函数handler来捕获信号2（SIGINT，通常由CtrlC触发…...

编程日记 2025/6/26 4:10:41

PHP黑白胶卷底片图转彩图功能 V2025.05.15

关于底片转彩图传统照片底片是摄影过程中生成的反色图像，为了欣赏照片，需要通过冲印过程将底片转化为正像。而随着数字技术的发展，我们现在可以使用数字工具不仅将底片转为正像，还可以添加色彩，重现照片原本的色彩效…...

编程日记 2025/6/25 9:49:27

【C++ / STL】封装红黑树实现map和set

文章目录一. 源码及框架分析1.决定搜索类型的传参思考：为什么要传第一个参数 2.KeyOfValue的作用二. 模拟实现map和set1. 实现出复用红黑树框架,并支持insert2. 支持iterator的实现iterator实现思路分析【iterator操作实现详解】 3.支持map的[ ]操作4.map和set代码…...

编程日记 2025/6/25 23:28:40

记录： Windows下远程Liunx 系统xrdp 用到的一些小问题（免费踩坑记录）

采用liunx Ubuntu22.04版本以下，需要安装 xrdp 或者VNC 具体过程就是下载在linux命令行里首先更新软件包：sudo apt update 安装xrdp服务：sudo apt install xrdp 启动XRDP：sudo systemctl start xrdp（如果在启动的…...

编程日记 2025/6/21 1:31:19