【后端速成Vue】computed计算属性
前言：
本期将会介绍 Vue 中的计算属性，他和 methods 方法又会有什么区别呢？在这里都会给你一一讲解。
篮球哥找工作专属IT岗位内部推荐：
专属内推链接：内推通道
1、computed计算属性
概念：
基于现有的数据，计算出来的新属性。 依赖的数据变化，自动重新计算。
语法：
● 声明在 computed 配置项中，一个计算属性对应一个函数
● 使用起来和普通属性一样使用 {{ 计算属性名 }}
业务需求：
有一个 list 数据，分别是购物商品的名称和数量，需求是根据商品的数量，统计出总共的商品数量。
list: [{ id: 1, name: '洗衣粉', num: 1 },{ id: 2, name: '餐具', num: 2 },{ id: 3, name: '铅笔', num: 5 },]
简单来说，就是要通过计算属性，将 list 里面的每一项的 num 进行求和。
完整代码如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>table {border: 1px solid #000;text-align: center;width: 240px;}th,td {border: 1px solid #000;}h3 {position: relative;}</style>
</head>
<body><div id="app"><h3>购物清单</h3><table><tr><th>名字</th><th>数量</th></tr><tr v-for="(item, index) in list" :key="item.id"><td>{{ item.name }}</td><td>{{ item.num }}个</td></tr></table><!-- 目标：统计求和，求得商品总数 --><p>商品总数：{{ totalCount }} 个</p></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {list: [{ id: 1, name: '洗衣粉', num: 1 },{ id: 2, name: '餐具', num: 2 },{ id: 3, name: '铅笔', num: 5 },]},computed: {totalCount () {// 基于现有的数据，编写求值逻辑// 计算属性函数内部，可以直接通过 this 访问到 app 实例// 需求：对 this.list 数组里面的 num 进行求和 → reducelet total = this.list.reduce((sum, item) => sum + item.num, 0)return total}}})</script>
</body>
</html>
上述代码的关键地方，就是 computed 属性里面有一个 totalCount 计算属性，计算属性的值就是最终 return 的值。
这里的写法跟 methods 里面的方法特别像！
而且这样的实现明明用 methods 里面的方法去实现也是可以实现的，为什么还要用计算属性呢？
2、computed VS methods
先来看看他们俩个的介绍：
计算属性computed
作用：封装了一段对于数据的处理，求得一个结果
语法：
- 写在computed配置项中
- 作为属性，直接使用
- js中使用计算属性： this.计算属性
- 模板中使用计算属性：{{计算属性}}
方法methods
作用：给Vue实例提供一个方法，调用以处理业务逻辑。
语法：
- 写在methods配置项中
- 作为方法调用
- js中调用：this.方法名()
- 模板中调用 {{方法名()}} 或者 @事件名=“方法名”
最重要的是：
- 缓存特性（提升性能）
计算属性会对计算出来的结果缓存，再次使用直接读取缓存，
依赖项变化了，会自动重新计算 → 并再次缓存 - methods没有缓存特性
所以简单来说，计算属性是拥有缓存机制的！！！
这里我们来用代码看一下计算属性的缓存机制：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app"><!-- 调用三次计算属性 -->{{totalCount}}{{totalCount}}{{totalCount}}<!-- 调用三次方法 -->{{totalCountFn()}}{{totalCountFn()}}{{totalCountFn()}}</div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {list: [{ id: 1, name: '洗衣粉', num: 1 },{ id: 2, name: '餐具', num: 2 },{ id: 3, name: '铅笔', num: 5 },]},computed: {totalCount () {console.log('计算属性执行了')let total = this.list.reduce((sum, item) => sum + item.num, 0)return total},},methods: {totalCountFn () {console.log('methods方法执行了')let total = this.list.reduce((sum, item) => sum + item.num, 0)return total}}})</script>
</body>
</html>
观察运行结果和控制台：
此时通过控制台的日志打印，明显可以发现，计算属性只执行了一次，而方法却调用了三次！
3、计算属性的完整写法
上述计算属性的基本用法已经介绍完了，但是可以明显发现一个问题：
计算属性默认的简写，只能读取访问，不能 “修改”
如何理解这个 “修改” 呢？也就是说，上面的简单写法，程序员是无法直接修改计算属性的值的！比如有个计算属性 count，是不能写出 this.count = 10 这样的代码的！
但是如果使用计算属性的完整写法就可以控制计算属性的值了！
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>input {width: 30px;}</style>
</head>
<body><div id="app">姓：<input type="text" v-model="firstName"> +名：<input type="text" v-model="lastName"> =<span>{{ fullName }}</span><br><br><button @click="changeName">改名卡</button></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {firstName: '王',lastName: '五',},methods: {changeName () {this.fullName = '张三'}},computed: {// 简写 → 获取，没有配置设置的逻辑// fullName () {// return this.firstName + this.lastName// }// 完整写法 → 获取 + 设置fullName: {// (1) 当fullName计算属性，被获取求值时，执行get（有缓存，优先读缓存）// 会将返回值作为，求值的结果get () {return this.firstName + this.lastName},// (2) 当fullName计算属性，被修改赋值时，执行set// 修改的值，传递给set方法的形参set (value) { this.firstName = value.slice(0, 1)this.lastName = value.slice(1)}}}})</script>
</body>
</html>
直接写完整的 get 和 set 方法即可，此时上述说的 this.count = 10 就会执行对应 count 的计算属性的 set 方法里面的逻辑了。
相关文章：
【后端速成Vue】computed计算属性
前言： 本期将会介绍 Vue 中的计算属性，他和 methods 方法又会有什么区别呢？在这里都会给你一一讲解。 篮球哥找工作专属IT岗位内部推荐： 专属内推链接：内推通道 1、computed计算属性 概念： 基于现有的数据…...
力扣－每日温度
. - 力扣（LeetCode） 这是我的第一个思路 虽然可以得到正确答案 但是过于暴力 已经超出了时间限制 class Solution { public:vector<int> dailyTemperatures(vector<int>& temperatures) {vector<int>ans;for (int i 0; i <…...
（Go语言）初上手Go？本篇文章帮拿捏Go的数据类型！
1. bool 类型 布尔类型：只有 true 和 false 两种值 在Go中，整数 0 不代表 false 值，1也不代表 true 值 即数字无法代替布尔值进行逻辑判断，两者是完全不同的类型 布尔类型占用 1 字节 2. int 整型 Go中为不同位数的整数分配…...
支付宝域名如何加入白名单（扫码老是弹窗）
支付宝扫码之后，遇到非支付宝官方网页，请确认是否继续访问弹窗，问题解决办法。 本章教程提供解决办法，亲测有效。 一、打开支付宝开放平台 登录地址：https://open.alipay.com/ 然后进行扫码登录。 1、打开网页/移动应用开发 2、前往创建 3、创建应用...
嵌入式学习第21天Linux基础
目录 第1章 Linux 系统介绍 1.1 Unix 操作系统（了解） 1.2 Linux 操作系统（了解） 1.3 Linux 操作系统的主要特性（重点） 1.4 Linux 与 Unix 的区别与联系 1.5 GUN 与 GPL（了解） …...
【activiti工作流源码集成】springboot+activiti+mysql+vue+redis工作流审批流集成整合业务绑定表单流程图会签驳回
工作流集成实际项目案例，demo提供 源码获取方式：本文末个人名片直接获取。 前言 activiti工作流引擎项目，企业erp、oa、hr、crm等企事业办公系统轻松落地，请假审批demo从流程绘制到审批结束实例。 一、项目形式 springbootvue…...
华为私有接口类型hybrid
华为私有接口类型hybrid Tip：hybrid类型，简称混合型接口。 本次实验模拟2层网络下 vlan10 vlan20 不能互访，vlan10 vlan20 同时可以访问vlan100 sw1配置如下： <Huawei>sy [Huawei]sys sw1 [sw1]vl ba 10 20 100 [sw1]int…...
计算机的错误计算（一百五十）
摘要 探讨 MATLAB 中 的计算精度问题。当 为含有小数的大数或 （）附近数时，输出会有错误数字。 例1. 已知 计算 直接贴图吧： 另外，16位的正确值分别为 -0.7882256119904400e0、0.1702266977524110e0、-0.…...
【模块化大作战】Webpack如何搞定CommonJS与ES6混战（3）
在前端开发中，模块化是一个重要的概念，不同的模块化标准有不同的特点和适用场景。webpack 同时支持 CommonJS 和 ES6 Module，因此需要理解它们在互操作时 webpack 是如何处理的。 同模块化标准 如果导出和导入使用的是同一种模块化标准&…...
工程认证与Spring Boot：计算机课程管理的新探索
摘要 随着信息技术在管理上越来越深入而广泛的应用，管理信息系统的实施在技术上已逐步成熟。本文介绍了基于工程教育认证的计算机课程管理平台的开发全过程。通过分析基于工程教育认证的计算机课程管理平台管理的不足，创建了一个计算机管理基于工程教育认…...
vue3的自定义hooks怎么写？
写个hook函数去追踪鼠标位置： 没用hook前： <script setup> import { ref, onMounted, onUnmounted } from vueconst x ref(0) const y ref(0)function update(event) {x.value event.pageXy.value event.pageY }onMounted(() > window.ad…...
SpringBoot项目编译报错 类文件具有错误的版本 61.0, 应为 52.0
springboot项目在编译时报错： /Users/Apple/Developer/art/caicai/cai-api/dubbo-samples/1-basic/dubbo-samples-spring-boot/dubbo-samples-spring-boot-provider/src/main/java/org/apache/dubbo/springboot/demo/provider/ProviderApplication.java:22:32 java…...
【网络】应用层——HTTP协议
> 作者：დ旧言~ > 座右铭：松树千年终是朽，槿花一日自为荣。 > 目标：了解什么是HTTP协议。 > 毒鸡汤：有些事情，总是不明白，所以我不会坚持。早安! > 专栏选自：网络 &g…...
ServletContext介绍
文章目录 1、ServletContext对象介绍1_方法介绍2_用例分析 2、ServletContainerInitializer1_整体结构2_工作原理3_使用案例 3、Spring案例源码分析1_注册DispatcherServlet2_注册配置类3_SpringServletContainerInitializer 4_总结 ServletContext 表示上下文对象，…...
让AI帮我用java实现EasyExel读取图片—支持WPS嵌入图片
🌈 场景概述 java 小伙伴相信都使用 EasyExcel 以及 POI 库实现过 Excel 批量导入、导出功能，但只有部分人实现过 excel 导入带图片数据的场景。这个技术实现手段网上也有很多案例和demo，最常见的就是通过 XSSFPictureData 来实现。但是在 W…...
C# 实现对指定句柄的窗口进行键盘输入的实现
在C#中实现对指定句柄的窗口进行键盘操作，可以通过多种方式来实现。以下是一篇详细的指南，介绍如何在C#中实现这一功能。 1. 使用Windows API函数 在C#中，我们可以通过P/Invoke调用Windows API来实现对指定窗口的键盘操作。以下是一些关键的…...
深度学习之卷积问题
1 卷积在图像中有什么直观作用 在卷积神经网络中，卷积常用来提取图像的特征，但不同层次的卷积操作提取到的特征类型是不相同的，特征类型粗分如表1所示。 表1 卷积提取的特征类型 卷积层次特征类型浅层卷积边缘特征中层卷积局部特征深…...
yum安装zabbix5.0升级php到74的办法
【背景】 公司时不时有扫描漏洞，之前发现了php漏洞，因开启防火墙，限定IP+端口，暂时躲过升级；现在，老话重提，开启了KPI考核，躲是躲不过去的了，升级吧 【难题】 服务器为centos7，因操作系统问题，只能安装zabbix5.0。当时图省力，官网的办法，都是yum安装，很是简便。…...
JavaWeb合集23-文件上传
二十三 、 文件上传 实现效果：用户点击上传按钮、选择上传的头像，确定自动上传，将上传的文件保存到指定的目录中，并重新命名，生成访问链接，返回给前端进行回显。 1、前端实现 vue3AntDesignVue实现 <tem…...
当AI遇上时尚：未来的衣橱会由机器人来打理吗？
内容概要 在当今这个快速发展的时代，人工智能与时尚的结合正在逐渐改写我们对衣橱管理的认知。传统的衣橱管理常常面临着空间不足、穿搭单调及库存过多等挑战，许多人在挑选服饰时难以做出决策。然而，随着技术的进步，智能推荐和自…...
进程地址空间（比特课总结）
一、进程地址空间 1. 环境变量 1 ）⽤户级环境变量与系统级环境变量 全局属性：环境变量具有全局属性，会被⼦进程继承。例如当bash启动⼦进程时，环 境变量会⾃动传递给⼦进程。 本地变量限制：本地变量只在当前进程(ba…...
模型参数、模型存储精度、参数与显存
模型参数量衡量单位 M：百万（Million） B：十亿（Billion） 1 B 1000 M 1B 1000M 1B1000M 参数存储精度 模型参数是固定的，但是一个参数所表示多少字节不一定，需要看这个参数以什么…...
Redis相关知识总结（缓存雪崩，缓存穿透，缓存击穿，Redis实现分布式锁，如何保持数据库和缓存一致）
文章目录 1.什么是Redis？2.为什么要使用redis作为mysql的缓存？3.什么是缓存雪崩、缓存穿透、缓存击穿？3.1缓存雪崩3.1.1 大量缓存同时过期3.1.2 Redis宕机 3.2 缓存击穿3.3 缓存穿透3.4 总结 4. 数据库和缓存如何保持一致性5. Redis实现分布式…...
java 实现excel文件转pdf | 无水印 | 无限制
文章目录 目录 文章目录 前言 1.项目远程仓库配置 2.pom文件引入相关依赖 3.代码破解 二、Excel转PDF 1.代码实现 2.Aspose.License.xml 授权文件 总结 前言 java处理excel转pdf一直没找到什么好用的免费jar包工具，自己手写的难度，恐怕高级程序员花费一年的事件，也…...
linux 下常用变更-8
1、删除普通用户 查询用户初始UID和GIDls -l /home/ ###家目录中查看UID cat /etc/group ###此文件查看GID删除用户1.编辑文件 /etc/passwd 找到对应的行，YW343:x:0:0::/home/YW343:/bin/bash 2.将标红的位置修改为用户对应初始UID和GID： YW3…...
MySQL中【正则表达式】用法
MySQL 中正则表达式通过 REGEXP 或 RLIKE 操作符实现（两者等价），用于在 WHERE 子句中进行复杂的字符串模式匹配。以下是核心用法和示例： 一、基础语法 SELECT column_name FROM table_name WHERE column_name REGEXP pattern; …...
Android Bitmap治理全解析：从加载优化到泄漏防控的全生命周期管理
引言 Bitmap（位图）是Android应用内存占用的“头号杀手”。一张1080P（1920x1080）的图片以ARGB_8888格式加载时，内存占用高达8MB（192010804字节）。据统计，超过60%的应用OOM崩溃与Bitm…...
使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台
🎯 使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台 📌 项目背景 随着大语言模型（LLM）的广泛应用，开发者常面临多个挑战： 各大模型（OpenAI、Claude、Gemini、Ollama）接口风格不统一；缺乏一个统一平台进行模型调用与测试；本地模型 Ollama 的集成与前…...
解读《网络安全法》最新修订，把握网络安全新趋势
《网络安全法》自2017年施行以来，在维护网络空间安全方面发挥了重要作用。但随着网络环境的日益复杂，网络攻击、数据泄露等事件频发，现行法律已难以完全适应新的风险挑战。 2025年3月28日，国家网信办会同相关部门起草了《网络安全…...
【C++】纯虚函数类外可以写实现吗？
1. 答案 先说答案，可以。 2.代码测试 .h头文件 #include <iostream> #include <string>// 抽象基类 class AbstractBase { public:AbstractBase() default;virtual ~AbstractBase() default; // 默认析构函数public:virtual int PureVirtualFunct…...