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

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

article 2025/9/27 11:36:01

目录

一、计算属性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/9/24 6:17:15

Spring 中的 @ComponentScan注解详解

在 Spring 框架中，@ComponentScan 是一个非常重要的注解，它用于自动扫描和注册 Bean。通过该注解，Spring 能够自动发现并管理标注了特定注解的类（如 @Component, @Service, @Repository 等），从而实现依赖注入和容器管理。本文将详细介绍 @ComponentScan 的作用、常见搭…...

编程日记 2025/6/8 6:45:10

MySQL 数据库故障排查指南

MySQL 数据库故障排查指南本指南旨在帮助您识别和解决常见的 MySQL 数据库故障。我们将从问题识别开始，逐步深入到具体的故障类型和排查步骤。 1. 问题识别与信息收集在开始排查之前，首先需要清晰地了解问题的现象和范围。故障现象： 数…...

编程日记 2025/9/21 5:34:00

Android Studio 模拟器配置方案

Android Studio 模拟器配置方案 1.引言2.使用Android Studio中的模拟器3.使用国产模拟器1.引言前面介绍【React Native基础环境配置】的时候需要配置模拟器，当时直接使用了USB调试方案，但是有些时候可能不太方便连接手机调试，比如没有iPhone调不了ios。接下来说明另外两种可…...

编程日记 2025/9/24 18:51:38

k8s中ingress-nginx介绍

1. 介绍 Ingress是一种Kubernetes资源，用于将外部流量路由到Kubernetes集群内的服务。与NodePort相比，它提供了更高级别的路由功能和负载平衡，可以根据HTTP请求的路径、主机名、HTTP方法等来路由流量。可以说Ingress是为了弥补NodePort在流量…...

编程日记 2025/9/24 18:52:13

键盘输出希腊字符方法

在不同操作系统中，输出希腊字母的方法有所不同。以下是针对 Windows 和 macOS 系统的详细方法，以及一些通用技巧： 1.Windows 系统 1.1 使用字符映射表字符映射表是一个内置工具，可以方便地找到并插入希腊字母。 • 步骤&#xf…...

编程日记 2025/8/19 23:59:45

字节DeerFlow开源框架：多智能体深度研究框架，实现端到端自动化研究流程

🦌 DeerFlow DeerFlow（Deep Exploration and Efficient Research Flow）是一个社区驱动的深度研究框架，它建立在开源社区的杰出工作基础之上。目标是将语言模型与专业工具（如网络搜索、爬虫和Python代码执行&#xff0…...

编程日记 2025/9/24 18:56:03

MySQL 存储函数[特殊字符] VS 存储过程[特殊字符]

1、存储函数😸 一、存储函数概述存储函数是MySQL中一种特殊的存储程序，具有以下特点： 返回单个值：必须通过RETURN语句返回明确的结果SQL表达式使用：可以直接在SQL语句中调用输入参数：只接受输入参数(隐…...

编程日记 2025/9/17 13:21:54

struct conn{ int fd; char rbuffer[1024]; char wbuffer[1024]; int wlength; int rlength; int (*recv_cb)(int); int (*send_cb)(int); }; int (*recv_cb)(int); recv_cb：函数指针的名称*recv_cb：星号 * 表示 recv_cb 是一个指针。(*recv_cb)&#…...

编程日记 2025/9/21 9:10:12

ElasticSearch重启之后shard未分配问题的解决

以下是Elasticsearch重启后分片未分配问题的完整解决方案，结合典型故障场景与最新实践： 一、快速诊断定位 ‌检查集群状态 GET /_cluster/health?pretty # status为red/yellow时需关注unassigned_shards字段值 ‌ 2.查看未分配分片详情 …...

编程日记 2025/9/12 15:06:14

算法第十八天｜530. 二叉搜索树的最小绝对差、501.二叉搜索树中的众数、236. 二叉树的最近公共祖先

530. 二叉搜索树的最小绝对差题目思路与解法第一想法： 一个二叉搜索树的最小绝对差，从根结点看，它的结点与它的最小差值一定出现在左子树的最右结点（左子树最大值）和右子树的最左结点（右子树的最小值…...

编程日记 2025/9/24 18:53:14

QMK键盘编码器（Encoder）（理论部分）

QMK键盘编码器（Encoder）（理论部分）前言作为一名深耕机械键盘DIY多年的老司机，我发现很多键盘爱好者对QMK编码器的配置总是一知半解。今天我就把多年积累的经验毫无保留地分享给大家，从硬件接线到软件配置，从基础应用到高阶玩法，一文全搞定！保证看完就能让你的编码…...

编程日记 2025/6/5 6:21:15

微服务调试问题总结

本地环境调试。启动本地微服务，使用公共nacos配置。利用如apifox进行本地代码调试解决调试问题。除必要的业务微服务依赖包需要下载到本地。使用mvn clean install -DskipTests进行安装启动前选择好profile环境进行启动，启动前记得mvn clean清理项目。…...

编程日记 2025/9/16 21:18:07

C++（2）

二、面向对象基础 1. 类与对象 1.1 核心概念类（Class） 定义：抽象描述具有共同特征和行为的对象模板本质：代码复用的蓝图，定义数据（属性）与操作（行为&#xff0…...

编程日记 2025/9/19 19:14:45

美SEC主席：探索比特币上市证券交易所

作者/演讲者：美SEC主席Paul S. Atkins 编译：Liam 5月12日，由美国SEC加密货币特别工作组发起的主题为《资产上链：TradFi与DeFi的交汇点》系列圆桌会议如期举行。会议期间，现任美SEC主席Paul S. Atkins发表了主旨演讲。…...

编程日记 2025/9/24 18:57:56

@Controller 与 @RestController-笔记

1.Controller与RestController对比 Spring MVC 中 Controller 与 RestController 的功能对比： Controller是Spring MVC中用于标识一个类作为控制器的标准注解。它允许处理HTTP请求，并返回视图名称，通常和视图解析器一起使用来渲染页面。而R…...

编程日记 2025/9/18 3:45:09

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

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

编程日记 2025/9/9 22:28:11

c++和c的不同

c:面向对象（封装，继承，多态），STL，模板一、基础定义与背景 C语言诞生年代：20世纪70年代，Dennis Ritchie在贝尔实验室开发。主要特点： 过程式、结构化编程面向系统底层…...

编程日记 2025/7/8 0:33:28

MySQL Join连接算法深入解析

引言在关系型数据库中，Join操作是实现多表数据关联查询的关键手段，直接影响查询性能和资源消耗。MySQL支持多种Join算法，包括经典的索引嵌套循环连接（Index Nested-Loop Join）、块嵌套循环连接（Block Nes…...

编程日记 2025/9/24 18:40:03

从构想到交付：专业级软开发流程详解

目录一、软件开发生命周期（SDLC）标准化流程 1. 需求工程阶段（Requirement Engineering） 2. 系统设计阶段（System Design） 3. 开发阶段（Implementation） 4. 测试阶段&a…...

编程日记 2025/6/27 1:34:04

腾讯云-人脸核身+人脸识别教程

一。产品概述慧眼人脸核身特惠活动腾讯云慧眼人脸核身是一组对用户身份信息真实性进行验证审核的服务套件，提供人脸核身、身份信息核验、银行卡要素核验和运营商类要素核验等各类实名信息认证能力，以解决行业内大量对用户身份信息真实性核实的需求&a…...

编程日记 2025/8/15 7:42:03

http请求卡顿

接口有时出现卡顿，而且抓包显示有时tcp目标机器没有响应， 但nginx和java应用又没有错误日志，让人抓耳挠腮，最终还是请运维大哥帮忙，一顿操作后系统暂时无卡顿了，佩服的同时感觉疑惑到底调整了啥东…...

编程日记 2025/9/24 19:01:17

使用Vite打包前端Vue项目，碰到依赖包体积大，出现内存溢出的解决办法

vite.config.ts 中方式一使用 esbuild build: {outDir: "dist",minify: "esbuild",sourcemap: false,chunkSizeWarningLimit: 5000,rollupOptions: {experimentalLogSideEffects: false,output: {// 最小化拆分包manualChunks(id) {if (id.includes(&q…...

编程日记 2025/9/26 2:05:44

C语言_函数调用栈的汇编分析

在 C 语言的底层实现中，函数调用栈是程序运行时内存管理的核心机制。它不仅负责函数间的控制转移，还管理局部变量、参数传递和返回值。本文将结合 C 语言代码和 x86-64 汇编指令，深入解析函数调用栈的工作原理。一、函数调用栈的基本概念函数调用栈是内存中的一块后进先…...

编程日记 2025/9/17 15:17:53

Java Spring Boot 控制器中处理用户数据详解

目录一、获取请求参数1.1 获取查询参数1.2 获取路径参数二、处理表单提交2.1 处理表单数据三、处理 JSON 数据3.1 接收 JSON 数据四、返回 JSON 数据五、处理文件上传5.1 单文件上传5.2 多文件上传六、总结在 Spring Boot 应用开发中，控制器（Contr…...

编程日记 2025/6/9 5:38:42

vite+vue建立前端工程

参考开始 | Vite 官方中文文档 VUE教程地址 https://cn.vuejs.org/tutorial/#step-1 第一个工程 https://blog.csdn.net/qq_35221977/article/details/137171497 脚本 chcp 65001 echo 建立vite工程 set PRO_NAMEmy-vue-appif not exist %PRO_NAME% (call npm i…...

编程日记 2025/9/24 18:46:24

【Docker】docker login总是报各种超时错误，导致登录不成功。

报错信息：Error response from daemon: Get “https://registry-1.docker.io/v2/”: net/http: request canceled while waiting for connection (Client.Timeout exceeded while awaiting headers).等超时错误。解决方案：docker login总是报各种超时错…...

编程日记 2025/9/21 15:12:22