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

【后端速成Vue】computed计算属性

news 文章来源：https://blog.csdn.net/m0_61784621/article/details/143483680 2025/2/3 15:52:39

前言：

本期将会介绍 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
作用：封装了一段对于数据的处理，求得一个结果
语法：

  1. 写在computed配置项中
  2. 作为属性，直接使用
    • js中使用计算属性： this.计算属性
    • 模板中使用计算属性：{{计算属性}}

方法methods
作用：给Vue实例提供一个方法，调用以处理业务逻辑。
语法：

  1. 写在methods配置项中
  2. 作为方法调用
    • js中调用：this.方法名()
    • 模板中调用 {{方法名()}} 或者 @事件名=“方法名”

最重要的是：

  1. 缓存特性（提升性能）
    计算属性会对计算出来的结果缓存，再次使用直接读取缓存，
    依赖项变化了，会自动重新计算 → 并再次缓存
  2. 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计算属性

前言&#xff1a; 本期将会介绍 Vue 中的计算属性&#xff0c;他和 methods 方法又会有什么区别呢&#xff1f;在这里都会给你一一讲解。 篮球哥找工作专属IT岗位内部推荐&#xff1a; 专属内推链接&#xff1a;内推通道 1、computed计算属性 概念&#xff1a; 基于现有的数据…...

编程日记 2024/11/11 7:50:16

力扣－每日温度

. - 力扣&#xff08;LeetCode&#xff09; 这是我的第一个思路 虽然可以得到正确答案 但是过于暴力 已经超出了时间限制 class Solution { public:vector<int> dailyTemperatures(vector<int>& temperatures) {vector<int>ans;for (int i 0; i <…...

编程日记 2024/11/11 7:45:10

（Go语言）初上手Go？本篇文章帮拿捏Go的数据类型！

1. bool 类型 布尔类型&#xff1a;只有 true 和 false 两种值 在Go中&#xff0c;整数 0 不代表 false 值&#xff0c;1也不代表 true 值 即数字无法代替布尔值进行逻辑判断&#xff0c;两者是完全不同的类型 布尔类型占用 1 字节 2. int 整型 Go中为不同位数的整数分配…...

编程日记 2024/11/11 7:44:09

支付宝域名如何加入白名单（扫码老是弹窗）

支付宝扫码之后，遇到非支付宝官方网页，请确认是否继续访问弹窗，问题解决办法。 本章教程提供解决办法，亲测有效。 一、打开支付宝开放平台 登录地址：https://open.alipay.com/ 然后进行扫码登录。 1、打开网页/移动应用开发 2、前往创建 3、创建应用...

编程日记 2024/11/11 7:42:06

嵌入式学习第21天Linux基础

目录 第1章 Linux 系统介绍 1.1 Unix 操作系统&#xff08;了解&#xff09; 1.2 Linux 操作系统&#xff08;了解&#xff09; 1.3 Linux 操作系统的主要特性&#xff08;重点&#xff09; 1.4 Linux 与 Unix 的区别与联系 1.5 GUN 与 GPL&#xff08;了解&#xff09; …...

编程日记 2024/11/11 7:39:03

【activiti工作流源码集成】springboot+activiti+mysql+vue+redis工作流审批流集成整合业务绑定表单流程图会签驳回

工作流集成实际项目案例&#xff0c;demo提供 源码获取方式&#xff1a;本文末个人名片直接获取。 前言 activiti工作流引擎项目&#xff0c;企业erp、oa、hr、crm等企事业办公系统轻松落地&#xff0c;请假审批demo从流程绘制到审批结束实例。 一、项目形式 springbootvue…...

编程日记 2024/11/11 7:36:00

华为私有接口类型hybrid

华为私有接口类型hybrid Tip&#xff1a;hybrid类型&#xff0c;简称混合型接口。 本次实验模拟2层网络下 vlan10 vlan20 不能互访&#xff0c;vlan10 vlan20 同时可以访问vlan100 sw1配置如下&#xff1a; <Huawei>sy [Huawei]sys sw1 [sw1]vl ba 10 20 100 [sw1]int…...

编程日记 2024/11/11 7:31:56

计算机的错误计算（一百五十）

摘要 探讨 MATLAB 中 的计算精度问题。当 为含有小数的大数或 &#xff08;&#xff09;附近数时&#xff0c;输出会有错误数字。 例1. 已知 计算 直接贴图吧&#xff1a; 另外&#xff0c;16位的正确值分别为 -0.7882256119904400e0、0.1702266977524110e0、-0.…...

编程日记 2024/11/11 7:30:55

【模块化大作战】Webpack如何搞定CommonJS与ES6混战（3）

在前端开发中&#xff0c;模块化是一个重要的概念&#xff0c;不同的模块化标准有不同的特点和适用场景。webpack 同时支持 CommonJS 和 ES6 Module&#xff0c;因此需要理解它们在互操作时 webpack 是如何处理的。 同模块化标准 如果导出和导入使用的是同一种模块化标准&…...

编程日记 2024/11/11 7:29:53

工程认证与Spring Boot：计算机课程管理的新探索

摘要 随着信息技术在管理上越来越深入而广泛的应用&#xff0c;管理信息系统的实施在技术上已逐步成熟。本文介绍了基于工程教育认证的计算机课程管理平台的开发全过程。通过分析基于工程教育认证的计算机课程管理平台管理的不足&#xff0c;创建了一个计算机管理基于工程教育认…...

编程日记 2024/11/11 7:28:53

vue3的自定义hooks怎么写？

写个hook函数去追踪鼠标位置&#xff1a; 没用hook前&#xff1a; <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…...

编程日记 2024/11/11 7:21:40

SpringBoot项目编译报错 类文件具有错误的版本 61.0, 应为 52.0

springboot项目在编译时报错&#xff1a; /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…...

编程日记 2024/11/11 7:19:38

【网络】应用层——HTTP协议

> 作者&#xff1a;დ旧言~ > 座右铭&#xff1a;松树千年终是朽&#xff0c;槿花一日自为荣。 > 目标&#xff1a;了解什么是HTTP协议。 > 毒鸡汤&#xff1a;有些事情&#xff0c;总是不明白&#xff0c;所以我不会坚持。早安! > 专栏选自&#xff1a;网络 &g…...

编程日记 2024/11/11 7:16:33

ServletContext介绍

文章目录 1、ServletContext对象介绍1_方法介绍2_用例分析 2、ServletContainerInitializer1_整体结构2_工作原理3_使用案例 3、Spring案例源码分析1_注册DispatcherServlet2_注册配置类3_SpringServletContainerInitializer 4_总结 ServletContext 表示上下文对象&#xff0c;…...

编程日记 2024/11/11 7:13:30

让AI帮我用java实现EasyExel读取图片—支持WPS嵌入图片

&#x1f308; 场景概述 java 小伙伴相信都使用 EasyExcel 以及 POI 库实现过 Excel 批量导入、导出功能&#xff0c;但只有部分人实现过 excel 导入带图片数据的场景。这个技术实现手段网上也有很多案例和demo&#xff0c;最常见的就是通过 XSSFPictureData 来实现。但是在 W…...

编程日记 2024/11/11 7:09:26

C# 实现对指定句柄的窗口进行键盘输入的实现

在C#中实现对指定句柄的窗口进行键盘操作&#xff0c;可以通过多种方式来实现。以下是一篇详细的指南&#xff0c;介绍如何在C#中实现这一功能。 1. 使用Windows API函数 在C#中&#xff0c;我们可以通过P/Invoke调用Windows API来实现对指定窗口的键盘操作。以下是一些关键的…...

编程日记 2024/11/11 7:07:25

深度学习之卷积问题

1 卷积在图像中有什么直观作用 ​ 在卷积神经网络中&#xff0c;卷积常用来提取图像的特征&#xff0c;但不同层次的卷积操作提取到的特征类型是不相同的&#xff0c;特征类型粗分如表1所示。 ​ 表1 卷积提取的特征类型 卷积层次特征类型浅层卷积边缘特征中层卷积局部特征深…...

编程日记 2024/11/11 7:02:21

yum安装zabbix5.0升级php到74的办法

【背景】 公司时不时有扫描漏洞，之前发现了php漏洞，因开启防火墙，限定IP+端口，暂时躲过升级；现在，老话重提，开启了KPI考核，躲是躲不过去的了，升级吧 【难题】 服务器为centos7，因操作系统问题，只能安装zabbix5.0。当时图省力，官网的办法，都是yum安装，很是简便。…...

编程日记 2024/11/11 7:01:19

JavaWeb合集23-文件上传

二十三 、 文件上传 实现效果&#xff1a;用户点击上传按钮、选择上传的头像&#xff0c;确定自动上传&#xff0c;将上传的文件保存到指定的目录中&#xff0c;并重新命名&#xff0c;生成访问链接&#xff0c;返回给前端进行回显。 1、前端实现 vue3AntDesignVue实现 <tem…...

编程日记 2024/11/11 6:58:17

当AI遇上时尚：未来的衣橱会由机器人来打理吗？

内容概要 在当今这个快速发展的时代&#xff0c;人工智能与时尚的结合正在逐渐改写我们对衣橱管理的认知。传统的衣橱管理常常面临着空间不足、穿搭单调及库存过多等挑战&#xff0c;许多人在挑选服饰时难以做出决策。然而&#xff0c;随着技术的进步&#xff0c;智能推荐和自…...

编程日记 2024/11/11 6:55:14

【初阶数据结构篇】二叉树OJ题

文章目录 须知 &#x1f4ac; 欢迎讨论&#xff1a;如果你在学习过程中有任何问题或想法&#xff0c;欢迎在评论区留言&#xff0c;我们一起交流学习。你的支持是我继续创作的动力&#xff01; &#x1f44d; 点赞、收藏与分享&#xff1a;觉得这篇文章对你有帮助吗&#xff1…...

编程日记 2024/11/11 6:51:11

Windows系统中Oracle VM VirtualBox的安装

一.背景 公司安排了师带徒&#xff0c;环境搭建问题一直是初级程序员头疼的事情&#xff0c;我记录一下这些基础的内容&#xff0c;方便初学者。大部分开发者的机器还是windows系统&#xff0c;所以写了怎么安装。 二.版本信息及 操作系统&#xff1a;windows11 家庭版…...

编程日记 2024/11/11 6:50:10

go语言使用总结（持续更新）

整理后的内容如下&#xff1a; 1. 先了解函数签名&#xff0c;再了解传入参数以及调用 函数签名是函数的声明部分&#xff0c;包括函数名、参数列表和返回值列表。理解函数签名是理解函数行为的第一步&#xff0c;尤其是在了解参数类型、参数数量和返回值类型等方面。通过了解…...

编程日记 2024/11/11 6:46:07

如何在Android中自定义property

在Android中创建自定义的属性&#xff08;Android property&#xff09;通常用于调试、性能调优或传递应用和系统之间的信息。 以下是如何在Android中创建和使用自定义属性的步骤&#xff1a; 1. 定义属性 在Android中&#xff0c;属性是以“属性名称属性值”形式定义的键值对…...

编程日记 2024/11/11 6:42:02

机器学习5_支持向量机_原问题和对偶问题——MOOC

目录 原问题与对偶问题的定义 定义该原问题的对偶问题如下 在定义了函数 的基础上&#xff0c;对偶问题如下&#xff1a; 综合原问题和对偶问题的定义得到&#xff1a; 定理一 对偶差距&#xff08;Duality Gap&#xff09; 强对偶定理&#xff08;Strong Duality Theo…...

编程日记 2024/11/11 6:40:01

索引的细节

目录 什么是线性 搜索算法&#xff1f; 算法&#xff1a;二进制搜索算法 二进制搜索如何工作&#xff1f; 什么是二叉排序树&#xff1f; 构建二叉排序树 什么是AVL树&#xff1f; AVL树的性能分析 什么是线性 搜索算法&#xff1f; 线性搜索是一种非常简单的搜索算法。在…...

编程日记 2024/11/11 6:38:59

LeetCode 540.有序数组中的单一元素

思路一&#xff1a;hash&#xff0c;键存入元素&#xff0c;值存入次数&#xff0c;然后遍历&#xff0c;不是最优解 思路二&#xff1a;二分查找 假设数组为 [1, 1, 2, 2, 3, 4, 4]&#xff0c;其中唯一出现一次的元素是 3。在一个有序数组中&#xff0c;如果没有唯一的元素&…...

编程日记 2024/11/11 6:36:57

【图文】【DIY便签】如何自行编译OPENCV使用动态库

1 去官网下载安装包和源码 下面红色圈中的是源码&#xff0c;绿色圈中的是安装包&#xff1a; 2 配置工具链 安装过程不说了&#xff0c;教程到处都是。编译的话使用CMAKE&#xff0c;配置如下&#xff1a; 上面两个路径分别是&#xff1a; 源码目录编译生成的文件放置的位…...

编程日记 2024/11/11 6:35:56

WordPress文章自动提交Bing搜索引擎：PHP推送脚本教程

随着网站SEO优化的重要性日益增加，将新发布的内容快速提交到搜索引擎显得尤为重要。尤其对于Bing站长平台，自动化推送能让Bing尽快发现和索引我们网站的新内容。本文将详细介绍如何通过PHP脚本自动推送WordPress当天发布的文章至Bing站长平台，确保新文章被Bing及时收录。 前…...

编程日记 2024/11/11 6:34:55

C++题目分享

嗨嗨嗨&#xff0c;我又来更新这个系列了&#xff0c;很久没更新了。让我们看一看有那些有趣的题目&#xff1a; 题目一&#xff1a; 1.以单链表作为存储结构&#xff0c;实现线性表的就地逆置&#xff08;提示&#xff0c;就地逆置&#xff1a;在不使用额外的数据结构或空间…...

编程日记 2024/11/11 6:32:53

网站建设 文档下载/百度推广网址

原文地址&#xff1a;http://flychao88.iteye.com/blog/2192259 https://blog.csdn.net/bohu83/article/details/51124058 原文如下 一、常用命令分析 1. jstat -gc pid 可以显示gc的信息&#xff0c;查看gc的次数&#xff0c;及时间。 其中最后五项&#xff0c;分别是you…...

编程日记 2025/2/3 13:13:04

wordpress 字数限制/怎么建网站赚钱

import org.apache.mina.core.buffer.IoBuffer; //导入方法依赖的package包/类Overridepublic MessageDecoderResult decode(IoSession session, IoBuffer in,ProtocolDecoderOutput outPut) throws Exception {//将客户端发来的对象进行封装//TODO 等待测试超长数据是否能正常…...

编程日记 2025/2/3 12:00:13

桂林市建设工程造价管理站网站/新手怎么学电商运营

据央视报道&#xff0c;中国人民银行副行长范一飞今日在第六届中国支付清算论坛上表示&#xff0c;我国将大幅放宽金融业市场准入&#xff0c;欢迎和鼓励外资进入支付清算市场。同时对现有的经营主体加强监管、规范&#xff0c;对违规零容忍。范一飞表示&#xff0c;我国将全面…...

编程日记 2025/2/3 11:46:51

新手用什么程序建网站/免费自制app软件

近日&#xff0c;国际著名的市场研究公司IDC发布了《中国Linux市场2005-2009年预测与分析》报告。报告预测&#xff0c;中国Linux市场2005年到2009年的年平均增长率为23.9%。 报告显示&#xff0c;Turbolinux公司2004年的销售收入相比2003年进一步扩大&#xff0c;居中国Linux市…...

编程日记 2025/2/3 11:34:43

网站建设包括/微信朋友圈广告如何投放

查看GPU情况 nvidia-smi查看命令&#xff0c;下部分为占用pidwatch -n 1 nvidia-smi每1秒刷新一次fuser -v /dev/nvidia*运行在gpu上的所有程序 watch的参数解释 使用 # device setup use_cuda torch.cuda.is_available() device torch.device(cuda if use_cuda else cpu…...

编程日记 2025/2/3 11:08:03

网站建设分工明细表/百度宣传推广费用

导读 这篇文章主要介绍了如何在 Python 中注释&#xff0c;帮助其他开发者理解你的代码&#xff0c;以及代码的目的。感兴趣的朋友可以了解下 在写 Python 代码的时候&#xff0c;一个很好的编码实践就是使得你的代码简洁&#xff0c;易懂。组织代码&#xff0c;设置变量&#…...

编程日记 2025/2/3 10:30:18