浅谈Vue.js的计算属性computed
什么是computed属性
computed
属性用于声明计算属性,这些属性的值是基于其他响应式属性计算而来的,当依赖的响应式属性发生变化时,计算属性会自动重新计算。
与Vue.js 2相比,Vue.js 3的 computed
属性语法稍有变化,不再使用对象字面量,而是使用类似函数的形式来声明计算属性。此外,Vue.js 3还引入了一个新的 ref
函数,用于创建响应式引用,可以在 setup
函数中使用。
下面是一个简单的Vue.js 3中的 computed
的例子:
<template><div><p>{{ message }}</p><p>{{ reversedMessage }}</p></div>
</template><script setup>
// 使用 <script setup> 语法糖// 定义响应式数据
const message = ref('Hello, Vue.js 3!');// 使用 computed
const reversedMessage = computed(() => {// 计算属性的值是基于响应式数据 message 计算的return message.value.split('').reverse().join('');
});
</script>
在上面的例子中,reversedMessage
是一个计算属性,它依赖于 message
反序输出message
的内容
计算属性的作用
computed
属性的存在主要是为了解决一些常见的需求,使得数据的计算和派生更加方便、高效,并确保数据的响应性。
以下是一些使用计算属性的主要原因:
-
依赖追踪: 计算属性允许你声明式地描述数据的依赖关系。当依赖的数据发生变化时,计算属性会自动重新计算,而无需手动编写更新逻辑。这有助于避免手动追踪依赖关系,提高代码的可维护性。
-
缓存: 计算属性会缓存其结果,只有在依赖发生变化时才重新计算。这意味着如果多次访问同一个计算属性,只有在它的依赖发生变化时才会重新计算,从而提高性能。
-
简化模板逻辑: 在模板中,你可以直接使用计算属性,而不必在模板中编写复杂的逻辑或计算。这使得模板更加清晰和易读。
-
组合逻辑: 计算属性允许你将一些复杂的逻辑组合成一个属性,使代码更加模块化和可复用。
下面是一个简单的例子,展示了计算属性的用途:
<script setup>
import { ref } from 'vue'
const radius = ref(5)
const area = computed(() => {return Math.PI * radius.value * radius.value
})const circumference = computed(() => {return 2 * Math.PI * radius.value;
})
</script>
在上面的例子中,area
和 circumference
都是计算属性,它们依赖于 radius
。当 radius
发生变化时,这两个计算属性会自动更新,而无需手动干预。这样可以使代码更加清晰和易于维护。
computed VS methods
计算属性 (computed
属性) 和普通的函数在Vue.js中的使用有一些区别和优势。
计算属性更适合用于模板中的声明式逻辑,特别是涉及到响应式数据的复杂计算。普通函数更适合那些不依赖响应式数据的逻辑或者不需要自动依赖追踪的场景。
区别:
-
自动依赖追踪:
- 计算属性: Vue.js 会自动追踪计算属性的依赖关系。只要计算属性中用到的响应式数据发生变化,计算属性就会重新计算。
- 普通函数: 普通函数没有自动的依赖追踪。你需要手动管理函数中使用的依赖关系,可能需要使用
watch
来监听变化,或者在模板中使用函数时手动触发更新。
-
缓存机制:
- 计算属性: 具有缓存机制,只有当依赖变化时才会重新计算。多次访问相同计算属性时,只会计算一次。
- 普通函数: 没有内置的缓存机制,每次调用函数都会重新执行。
优势:
-
简化模板逻辑:
- 计算属性: 用于在模板中声明式地处理复杂的逻辑,使模板更加清晰和简洁。
- 普通函数: 在模板中使用普通函数可能导致模板变得复杂,尤其是当逻辑比较复杂时。
-
性能优化:
- 计算属性: 具有缓存机制,可以避免不必要的重复计算,提高性能。
- 普通函数: 没有缓存机制,每次调用都会重新执行,可能导致性能下降。
-
代码组织:
- 计算属性: 用于将相关逻辑组织成属性,使代码更加模块化和可维护。
- 普通函数: 在组件中直接定义函数,可能导致代码分散,难以维护。
可写setter
在Vue.js中,计算属性默认是只读的,也就是说你不能直接在模板中通过v-model或者类似的方式修改计算属性的值。计算属性是依赖于其他响应式数据的,它的值是由这些响应式数据计算而来的。
如果你需要在Vue实例中有一个既能够计算值,又能够被修改的属性,你可以使用 computed
的 get
和 set
方法。这样你就可以通过 v-model
或者手动赋值的方式修改这个属性的值。
以下是一个例子:
<template><div><p>Radius: {{ radius }}</p><p>Area: {{ area }}</p><input v-model="radius" type="number" placeholder="Enter radius" /></div>
</template><script setup>
import { ref, computed } from 'vue';const radius = ref(5);const area = computed({get: () => Math.PI * radius.value * radius.value,set: (newValue) => {// 当修改 area 时,更新 radiusradius.value = Math.sqrt(newValue / Math.PI);}
});
</script>
在上面的例子中,area
是一个计算属性,通过 get
方法计算值,通过 set
方法监听对 area
的修改,然后反向计算出对应的 radius
。这样你就可以在模板中使用 v-model="area"
来修改 area
的值。
使用getter注意事项
计算属性的 getter
主要用于计算和返回一个派生值,应当保持简单、同步,不应该执行复杂的逻辑或副作用。如果有复杂逻辑或异步操作,应当考虑使用其他适当的方式。
当使用计算属性的 getter
时,有一些需要注意的事项:
-
只返回值: 计算属性的
getter
应当只返回一个值,而不是执行一些可能产生副作用的操作。计算属性的目的是计算一个值,而不是用于执行命令式的操作。如果你需要执行一些副作用,应该考虑使用生命周期钩子函数或watch
。 -
不要使用箭头函数: 在
getter
中,尽量不要使用箭头函数。因为箭头函数没有自己的this
上下文,而在计算属性中,this
指向的是当前 Vue 实例,而非调用它的对象。使用普通函数确保正确的this
上下文。当然在vue3 setup语法糖内是可以使用的箭头函数的。 -
避免异步操作: 计算属性的
getter
应当是同步的,不要在getter
中执行异步操作。如果需要异步操作,可以考虑使用watch
或者其他适当的生命周期钩子。 -
避免修改计算属性依赖的响应式数据: 计算属性依赖于响应式数据,但在
getter
中应当避免修改这些响应式数据,因为这样会导致无限循环更新。computed: {myComputedProperty: function() {// 避免在 getter 中修改依赖的响应式数据// 这样会导致无限循环更新this.someValue = this.someValue + 1;return this.someValue;} }
小结
- 计算属性值会基于其响应式依赖被缓存。一个计算属性仅会在其响应式依赖更新时才重新计算。
- 可以使用setter修改计算属性的值
- 不要在 getter 中做异步请求或者更改 DOM
相关文章:
浅谈Vue.js的计算属性computed
什么是computed属性 computed 属性用于声明计算属性,这些属性的值是基于其他响应式属性计算而来的,当依赖的响应式属性发生变化时,计算属性会自动重新计算。 与Vue.js 2相比,Vue.js 3的 computed 属性语法稍有变化,不…...
Linux常用指令详解
目录 前言: Linux的目录结构 Linux常用指令简介 whoami指令 ls指令 pwd指令 cd指令 tree指令 touch指令 mkdir指令 rmdir指令与rm指令 man指令 cp(copy)指令 mv(move)指令 cat指令 重定向及重定向的类型…...
Nginx(性能优化)
到这里文章的篇幅较长了,最后再来聊一下关于Nginx的性能优化,主要就简单说说收益最高的几个优化项,在这块就不再展开叙述了,毕竟影响性能都有多方面原因导致的,比如网络、服务器硬件、操作系统、后端服务、程序自身、数…...
机器学习笔记 - 如何在Python中对网格和点云进行体素化?
一、简述 本文主要是为了了解如何生成体素表示,体素之于3D就像像素之于2D。体素本质上是 3D 像素,但它们不是正方形,而是完美的立方体。 理论上,体素是复制现实的完美建模技术。 这里我们要了解四个广泛流行的 Python 库(Open3D、Trimesh、PyVista、pyntcloud )生成点云…...
冒个泡!OceanBase亮相 2023 新加坡金融科技节
近日,OceanBase 亮相 Singapore Fintech Festival 2023(2023 新加坡金融科技节)!本届新加坡金融科技节于 2023 年 11 月 15 日至 17 日在新加坡博览展览中心举行,展会期间,OceanBase 得到了众多金融科技机构…...
正则表达式(5):常用符号
正则表达式(5):常用符号 小结 本博文转载自 在本博客中,”正则表达式”为一系列文章,如果你想要从头学习怎样在Linux中使用正则,可以参考此系列文章,直达链接如下: 在Linux中使用正…...
Web安全漏洞分析-XSS(下)
随着互联网的迅猛发展,Web应用的普及程度也愈发广泛。然而,随之而来的是各种安全威胁的不断涌现,其中最为常见而危险的之一就是跨站脚本攻击(Cross-Site Scripting,简称XSS)。XSS攻击一直以来都是Web安全领…...
金南瓜SECS/GEM C# SDK 快速使用指南
本文对如何使用金南瓜SECS/GEM C# SDK 快速创建一个满足SECS/GEM通信要求的应用程序,只需简单3步完成。 第一步:创建C# .NET程序 示例使用Visual Studio 2010,使用者可以选择更高级版本 Visual Studio 第二步:添加DLL库引用&am…...
在一个没有超级用户的mongodb 生产库上如何添加超级用户
说来这个问题,都觉得不可思议,一个数据库怎么没有超级用户呢,我们知道,MYSQL,PG,ORACLE等,创建好后,都有一个默认的超级用户,MONGODB也有超级用户,但需要自己…...
排序算法之二:冒泡排序
冒泡排序的思路 冒泡排序是交换排序 基本思想:所谓交换,就是根据序列中两个记录键值的比较结果来对换这两个记录在序列中的位置,交换排序的特点是:将键值较大的记录向序列的尾部移动,键值较小的记录向序列的前部移动…...
一键搭建你的hnust请假条
hnust请假条 湖南科技大学请假条生成器 https://hnust.rick.icu/new (直接使用) Hnust Leave Note 去github https://github.com/rickhqh/hnust_leave_note 效果展示 界面展示效果图 v2.0 更新 vant和vue重构了整个源码同步学校新版请假条样式修复了…...
C练习题13
单项选择题(本大题共20小题,每小题2分,共40分。在每小题给出的四个备选项中,选出一个正确的答案,并将所选项前的字母填写在答题纸的相应位置上。) 1.结构化程序由三种基本结构组成、三种基本结构组成的算法是() A.可以完成任何复杂的任务 B. 只能完成部分复杂的任务 C. 只能完…...
交易历史记录20231206 记录
昨日回顾: select top 10000 * from dbo.CODEINFO A left join dbo.全部A股20231206010101 B ON A.CODE B.代码 left join dbo.全部A股20231206CONF D on A.CODED.代码left join dbo.全部A股20231206 G on A.CODEG.代码 left…...
1-5总体分布的推断
...
深信服技术认证“SCSA-S”划重点:XSS漏洞
为帮助大家更加系统化地学习网络安全知识,以及更高效地通过深信服安全服务认证工程师考核,深信服特别推出“SCSA-S认证备考秘笈”共十期内容,“考试重点”内容框架,帮助大家快速get重点知识~ 划重点来啦 *点击图片放大展示 深信服…...
MIT6S081-Lab2总结
大家好,我叫徐锦桐,个人博客地址为www.xujintong.com,github地址为https://github.com/xjintong。平时记录一下学习计算机过程中获取的知识,还有日常折腾的经验,欢迎大家访问。 Lab2就是了解一下xv6的系统调用流程&…...
CMMI5大成熟度等级和4大过程域
CMMI(Capability Maturity Model Integration,能力成熟度模型集成)模型系列是帮助组织改进其过程的最佳实践的集合。这些模型由来自产业界、政府以及软件工程研究所(Software Engineering Institute, SEI)的…...
c++新经典模板与泛型编程:const修饰符的移除与增加
const修饰符的移除 让你来写移除const修饰符,你会怎么样来写? 😂😂trait类模板,如下 #include <iostream>// 泛化版本 template<typename T> struct RemoveConst {using type T; };// 特化版本 template…...
AUTOSAR汽车电子嵌入式编程精讲300篇-基于加密算法的车载CAN总线安全通信
目录 前言 研究现状 系统架构研究 异常检测研究 认证与加密研究 相关技术 2.1车联网 2.2车载网络及总线 2.2.1 CAN总线基础 2.2.2 CAN总线网络安全漏洞 2.2.3 CAN总线信息安全需求 2.3密码算法 2.3.1 AES算法 2.3.2 XTEA算法 CAN网络建模与仿真 3.1 CAN网络建模…...
4-Docker命令之docker start
1.docker start介绍 docker start命令是用来启动一个或多个已经被停止的docker容器。 2.docker start用法 docker start [参数] container [container......] [root@centos79 ~]# docker start --helpUsage: docker start [OPTIONS] CONTAINER [CONTAINER...]Start one or…...
AWS Remote Control ( Wi-Fi ) on i.MX RT1060 EVK - 2 “架构 AWS”
接续上一章节,我们把开发环境架设好之后,此章节叙述如何建立 AWS IoT 环境,请务必已经有 AWS Account,申请 AWS Account 之流程将不在此说明。 III-1. 登入AWS IoT, 在“管理”>“所有装置”>“实物”下点击“建…...
日志框架梳理(Log4j,Reload4j,JUL,JCL,SLF4J,Logback,Log4j2)
原文链接 日志框架发展历程 在了解日志框架时总会列出一系列框架:Log4j,Reload4j,JUL,JCL,SLF4J,Logback,Log4j2,这么多框架让人感到混乱,该怎么选取、该怎么用。接下来…...
内核无锁队列kfifo
文章目录 1、抛砖引玉2、内核无锁队列kfifo2.1 kfifo结构2.2 kfifo分配内存2.3 kfifo初始化2.4 kfifo释放2.5 kfifo入队列2.6 kfifo出队列2.7 kfifo的判空和判满2.8 关于内存屏障 1、抛砖引玉 昨天遇到这样一个问题,有多个生产者,多个消费者,…...
18、XSS——cookie安全
文章目录 1、cookie重要字段2、子域cookie机制3、路径cookie机制4、HttpOnly Cookie机制5、Secure Cookie机制6、本地cookie与内存cookie7、本地存储方式 一般来说,同域内浏览器中发出的任何一个请求都会带上cookie,无论请求什么资源,请求时&…...
从零开发短视频电商 Jmeter压测示例模板详解(无认证场景)
文章目录 添加线程组添加定时器添加HTTP请求默认值添加HTTP头管理添加HTTP请求添加结果断言响应断言 Response AssertionJSON断言 JSON Assertion持续时间断言 Duration Assertion 添加察看结果树添加聚合报告添加表格察看结果参考 以压测百度搜索为例 https://www.baidu.com/s…...
C++可以函数重载而C不可以的原因
函数重载是指在同一个作用域内,可以定义多个函数,它们具有相同的名称但是参数列表不同。函数重载的主要原理是函数的签名不同,而在 C 中,函数签名包括函数的名称和参数列表。而在 C 中,函数的标识仅依赖于函数的名称&a…...
Spark常见算子汇总
创建RDD 在Spark中创建RDD的方式分为三种: 从外部存储创建RDD从集合中创建RDD从其他RDD创建 textfile 调用SparkContext.textFile()方法,从外部存储中读取数据来创建 RDD parallelize 调用SparkContext 的 parallelize()方法,将一个存在的集合&…...
【华为数据之道学习笔记】3-1 基于数据特性的分类管理框架
华为根据数据特性及治理方法的不同对数据进行了分类定义:内部数据和外部数据、结构化数据和非结构化数据、元数据。其中,结构化数据又进一步划分为基础数据、主数据、事务数据、报告数据、观测数据和规则数据。 对上述数据分类的定义及特征描述。 分类维…...
电脑版便签软件怎么设置在桌面上显示?
对于不少上班族来说,如果想要在使用电脑办公的时候,随手记录一些常用的工作资料、工作注意事项等内容,直接在电脑上使用便签软件记录是比较方便的。电脑桌面便签工具不仅方便我们随时记录各类工作事项,而且支持我们快速便捷使用这…...
【华为数据之道学习笔记】2-建立企业级数据综合治理体系
数据作为一种新的生产要素,在企业构筑竞争优势的过程中起着重要作用,企业应将数据作为一种战略资产进行管理。数据从业务中产生,在IT系统中承载,要对数据进行有效治理,需要业务充分参与,IT系统确保遵从&…...
【IC前端虚拟项目】git和svn项目托管平台的简单使用说明
【IC前端虚拟项目】数据搬运指令处理模块前端实现虚拟项目说明-CSDN博客 代码托管在gitee平台上,进去后会看到文档目录“MVU芯片前端设计验证虚拟项目”和工程目录“mvu_prj”,可以通过git来下载工程: git clone gitgitee.com:gjm9999/ic_vi…...
C++ IO库
IO类 IO对象不能拷贝和赋值 iostream 表示形式的变化: 将100转换成二进制序列 然后格式化输出 x,y共用一块内存 输出的时候用不同的方式解析同一块内存 操作 格式化:内部表示转换为相应字节序列 缓存:要输出的内容放到缓存 编码转换&…...
Springboot 项目关于版本升级到 3.x ,JDK升级到17的相关问题
由于spring 停止对2.x 版本的维护,以及 jdk 频繁发布等客观因素,现需要对已有springboot 工程做一次全面升级;已因对市面上第三方等依赖库的兼容问题; 现有工程使用哥技术栈是版本: freemarker :2.3.32 spr…...
QGraphicsView实现简易地图7『异步加载-多瓦片-无底图』
前文链接:QGraphicsView实现简易地图6『异步加载-单瓦片-无底图』 前一篇文章提到的异步单瓦片加载,是指线程每准备好一个瓦片数据后,立刻抛出信号让主线程加载。而本篇异步多瓦片加载是指线程准备好所有瓦片数据后,一起抛出信号让…...
Spring Boot学习(三十三):集成kafka
前言 下面是zookeeper和kafka的官网下载地址,大家可以学习下载 zookeeper下载地址:http://zookeeper.apache.org/releases.html kafka下载地址:http://kafka.apache.org/downloads.html 1、添加依赖 在 pom.xml 文件中添加kafka依赖&am…...
MOSFET
MOSFET 电子元器件百科 文章目录 MOSFET前言一、MOSFET是什么二、MOSFET类别三、MOSFET应用实例四、MOSFET作用原理总结前言 MOSFET是一种常见的半导体器件,通过栅极电场控制通道区的导通特性,以控制电流流动。它在现代电子电路中发挥着重要的作用,并广泛应用于各种应用领域…...
DriveWorks——参数化设计非标定制利器
DriveWorks基本介绍 DriveWorks是一套被 SOLIDWORKS 认可为金牌合作伙伴产品的设计自动化软件。DriveWorks 可自动创建特定于订单的销售文档和 SOLIDWORKS 制造数据。减少重复性任务,消除错误,增加销售额,并在创纪录的时间内交付定制产品。 为…...
DevEco Studio集成ArkUI-X
语雀知识库地址:语雀HarmonyOS知识库 飞书知识库地址:飞书HarmonyOS知识库 在上篇文章(HarmonyOS应用开发工具DevEco Studio安装与使用)中我说到官方推出了4.0 Beta版本的IDE,这篇文章就来介绍这个版本的安装与使用 该版本集成了HarmonyOS多…...
网络视频服务器的作用是什么?
随着互联网的快速发展和网络带宽的提升,网络视频已经成为人们日常生活中不可或缺的一部分。网络视频服务器作为支持和传输网络视频的关键基础设施,发挥着重要的作用。本文将以网络视频服务器的作用为方向,探讨其在现代社会中的重要性。 首先…...
解决vue3使用iconpark控制台预警提示问题
前言 最近在项目中使用 iconpark-icon 来管理图标,一切都很顺利,引入链接后,图标正常显示,没有报错。但是控制台却发出了预警信息。 [Vue warn]: Failed to resolve component: iconpark-icon If this is a native custom eleme…...
VMware 虚拟机 NAT 模式网络配置
配置的核心点在于 网关要一致,才能访问外网 比如下面的网关都是:192.168.145.2 问题总结: 当时重启电脑后如果连不上外网了,检查下 windows 服务中 NAT服务是否已经启动...
5-redis高级-哨兵
1 哨兵 1.1 python 操作哨兵 1 哨兵 # 主从---》一主多从-主库用来写-从库用来读-主库挂了--》整个系统就不能写数据了#主从复制存在的问题:1 主从复制,主节点发生故障,需要做故障转移,可以手动转移:让其中一个slave变…...
鸿蒙HarmonyOS4.0开发应用学习笔记
黑马程序员鸿蒙4.0视频学习笔记,供自己回顾使用。1.安装开发工具DevEco Studio 鸿蒙harmony开发文档指南 DevEco Studio下载地址 选择或者安装环境 选择和下载SDK 安装总览 编辑器界面 2.TypeScript语法 2.1变量声明 //string 、number、boolean、any、u…...
联通宽带+老毛子Padavan固件 开启IP v6
联通宽带开启IP v6 参考: 联通宽带开启 IPV6 的方法_联通ipv6怎么开通-CSDN博客 个人宽带如何开启IPv6网络访问 - 知乎 (zhihu.com) 首先,你要确定当前你所在的地区运营商已经开通了IPV6,可以使用手机流量 IP查询(ipw.cn) | IPv6测试 | IPv…...
唯创知音WT2003Hx系列单片机语音芯片:家庭理疗产品的智能声音伴侣
随着科技的不断创新,家庭理疗产品正迎来一场智能化的变革。唯创知音的WT2003Hx系列单片机语音芯片以其强大的功能和高品质音频播放能力,为家庭理疗产品带来了更为智能、沉浸式的用户体验。 1. MP3高品质音频播放 WT2003Hx系列语音芯片支持高品质的MP3音…...
2023_Spark_实验二十七:Linux中Crontab(定时任务)命令详解及使用教程
Crontab介绍: Linux crontab是用来crontab命令常见于Unix和类Unix的操作系统之中,用于设置周期性被执行的指令。该命令从标准输入设备读取指令,并将其存放于“crontab”文件中,以供之后读取和执行。该词来源于希腊语 chronos(χρ…...
Java动态代理实现与原理详细分析
Java动态代理实现与原理详细分析 关于Java中的动态代理,我们首先需要了解的是一种常用的设计模式–代理模式,而对于代理,根据创建代理类的 时间点,又可以分为静态代理和动态代理。 1、代理模式 代理模式是常用的java设计模式&…...
[实践总结] 使用Apache HttpClient 4.x进行进行一次Http请求
使用Apache HttpClient 4.x进行进行一次Http请求 依赖 <!-- https://mvnrepository.com/artifact/org.apache.httpcomponents/httpclient --> <dependency><groupId>org.apache.httpcomponents</groupId><artifactId>httpclient</artifactI…...
易宝OA 两处任意文件上传漏洞复现
0x01 产品简介 易宝OA系统是一种专门为企业和机构的日常办公工作提供服务的综合性软件平台,具有信息管理、 流程管理 、知识管理(档案和业务管理)、协同办公等多种功能。 0x02 漏洞概述 易宝OA系统UploadFile、BasicService.asmx等接口处存在文件上传漏洞,未授权的攻击者可…...
echart饼图高亮颜色设置,数据为0时候,labelLine不显示
鼠标移上去高亮,颜色变浅,希望不改变颜色 在series.data中为各项设置itemStyle,官方设置不生效,不知原因,可能版本问题 itemStyle: {normal: { color: #DFEAFF, },emphasis: { color: #DFEAFF }},数据为0时候显示饼图…...