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

vue3从精通到入门9:计算属性computed

在 Vue 3 中,computed 是一个用于创建计算属性的工具,它基于组件的响应式依赖进行复杂的计算,并返回一个新的响应式引用。计算属性是 Vue 的一个核心概念,它提供了一种声明式的方式来执行基于其依赖的响应式数据的计算。

computed使用:

计算属性与常规属性类似,但是它们是基于它们的依赖进行缓存的。只有当计算属性依赖的响应式数据发生变化时,它们才会重新求值。这意味着只要依赖没有变化,多次访问计算属性会立即返回之前缓存的结果,而不会重新执行计算逻辑。

 使用方法:

<template>  <div>  <p>原始值: {{ count }}</p>  <p>计算后的值: {{ doubleCount }}</p>  <button @click="increment">增加</button>  </div>  
</template>  <script setup>  
import { ref, computed } from 'vue';  // 创建响应式数据  
const count = ref(0);  // 创建计算属性  
const doubleCount = computed(() => count.value * 2);  // 定义方法  
function increment() {  count.value++;  
}  
</script>

count 是一个响应式数据,而 doubleCount 是一个计算属性,它返回 count 的两倍。当 count 的值发生变化时,doubleCount 会自动更新。

使用计算属性的好处是它们能够减少不必要的计算和渲染,提高性能。此外,它们还使得组件的逻辑更加清晰和易于维护。

 computed的使用场景

1. 复杂数据转换

当你需要从响应式数据中派生出一个经过计算或转换的新值时,可以使用 computed。例如,你可能有一个日期对象,而你想在模板中显示格式化的日期字符串。

<template>  <p>格式化后的日期: {{ formattedDate }}</p>  
</template>  <script setup>  
import { ref, computed } from 'vue';  const date = ref(new Date());  const formattedDate = computed(() => {  return date.value.toLocaleDateString();  
});  
</script>

2. 依赖多个数据源的属性

如果你的计算属性依赖于多个响应式数据项,并且当这些数据项中的任何一个改变时,你都希望重新计算该属性,那么 computed 是非常有用的。

<template>  <p>总价: {{ totalPrice }}</p>  
</template>  <script setup>  
import { ref, computed } from 'vue';  const quantity = ref(2);  
const pricePerItem = ref(10);  const totalPrice = computed(() => {  return quantity.value * pricePerItem.value;  
});  
</script>

3. 减少模板中的复杂逻辑

在模板中直接编写复杂的逻辑表达式可能会导致代码难以阅读和维护。使用 computed 可以将这些逻辑封装起来,使模板更加简洁清晰。

<template>  <p v-if="isUserActive">用户活跃</p>  <p v-else>用户不活跃</p>  
</template>  <script setup>  
import { ref, computed } from 'vue';  const lastActivity = ref(new Date(2023, 6, 1)); // 假设这是用户最后一次活动的日期  const isUserActive = computed(() => {  const now = new Date();  const oneHourAgo = new Date(now.getTime() - 60 * 60 * 1000); // 一小时前  return lastActivity.value > oneHourAgo;  
});  
</script>

4. 优化性能

计算属性会缓存其值,只有当其依赖的响应式数据发生变化时,才会重新计算。这种缓存机制可以帮助避免不必要的计算和渲染,从而提高应用程序的性能

与 watch 对比

虽然 watch 也可以用来观察和响应数据变化,但它主要用于执行异步操作或开销较大的操作。相比之下,computed 更适合用于同步计算,且由于它的缓存机制,通常比 watch 更高效。

 computed函数的原理

 computed函数的原理主要是基于Vue的响应式系统,通过getter和setter函数来创建和管理计算属性。

1. 响应式依赖收集:当在组件中定义计算属性时,Vue会为该计算属性创建一个getter函数。这个getter函数的作用就是返回计算属性的值。在getter函数执行的过程中,它可能会访问其他响应式数据(如data中的属性或props等)。每当getter函数访问这些响应式数据时,Vue的响应式系统会记录下这些依赖关系,即计算属性依赖于哪些响应式数据。

2. 缓存机制:计算属性的一个关键特性是它具有缓存机制。这意味着,只要计算属性所依赖的响应式数据没有发生变化,那么多次访问计算属性时,都会直接返回之前计算并缓存的结果,而不会重新执行getter函数中的计算逻辑。这种缓存机制大大提高了性能,避免了不必要的重复计算。

3. 依赖更新与重新计算:当计算属性所依赖的响应式数据发生变化时,Vue的响应式系统会触发依赖更新。这个过程会标记计算属性为“脏”状态,表示其值可能不再是最新的。在下一个组件更新周期中,Vue会重新执行计算属性的getter函数,以获取最新的计算结果,并更新缓存。这样,组件中绑定计算属性的地方就能显示最新的数据。

4. Setter函数:虽然大多数情况下我们主要关注计算属性的getter函数,但computed属性实际上也支持setter函数。setter函数在计算属性的值被显式修改时调用。然而,在实际开发中,我们通常会避免直接修改计算属性的值,因为这样会破坏其响应式依赖和缓存机制。如果需要修改计算属性的值,通常应该修改它所依赖的原始响应式数据。

总结:computed函数的原理是通过getter和setter函数来实现计算属性的创建、缓存、依赖收集和更新。这使得计算属性能够自动响应其依赖的响应式数据的变化,并在需要时重新计算值,从而保持与数据的同步,并优化性能。

相关文章:

vue3从精通到入门9:计算属性computed

在 Vue 3 中&#xff0c;computed 是一个用于创建计算属性的工具&#xff0c;它基于组件的响应式依赖进行复杂的计算&#xff0c;并返回一个新的响应式引用。计算属性是 Vue 的一个核心概念&#xff0c;它提供了一种声明式的方式来执行基于其依赖的响应式数据的计算。 compute…...

kafka面试常见问题

1、如何判断kafka某个主题消息堆积&#xff1f; 要判断Kafka中某个主题的消息是否堆积&#xff0c;可以通过查看该主题的生产者和消费者的偏移量&#xff08;offset&#xff09;差异来实现。Kafka中的每条消息在主题的分区内都有一个唯一的偏移量&#xff0c;生产者每发送一条…...

深入解析Hadoop生态核心组件:HDFS、MapReduce和YARN

这里写目录标题 01HDFS02Yarn03Hive04HBase1&#xff0e;特点2&#xff0e;存储 05Spark及Spark Streaming关于作者&#xff1a;推荐理由&#xff1a;作者直播推荐&#xff1a; 一篇讲明白 Hadoop 生态的三大部件 进入大数据阶段就意味着进入NoSQL阶段&#xff0c;更多的是面向…...

【chatGPT】我:在Cadence Genus软件中,出现如下问题:......【1】

我 在Cadence Genus中&#xff0c;出现如下问题&#xff1a;Error&#xff1a;A command argument did not match any of the acceptable command option. [TUI-170] [set_db] :‘/’ is not a legal option for the command. 该如何解决 ChatGPT Cadence Genus的错误消息 “…...

面试题:JVM 调优

一、JVM 参数设置 1. tomcat 的设置 vm 参数 修改 TOMCAT_HOME/bin/catalina.sh 文件&#xff0c;如下图 JAVA_OPTS"-Xms512m -Xmx1024m" 2. springboot 项目 jar 文件启动 通常在linux系统下直接加参数启动springboot项目 nohup java -Xms512m -Xmx1024m -jar…...

PS从入门到精通视频各类教程整理全集,包含素材、作业等(8)

PS从入门到精通视频各类教程整理全集&#xff0c;包含素材、作业等 最新PS以及插件合集&#xff0c;可在我以往文章中找到 由于阿里云盘有分享次受限制和文件大小限制&#xff0c;今天先分享到这里&#xff0c;后续持续更新 B站-PS异闻录&#xff1a;萌新系统入门课课程视频 …...

VSCode安装及Python、Jupyter插件安装使用

VSCode 介绍 Visual Studio Code&#xff08;简称VSCode&#xff09;是一个由微软开发的免费、开源的代码编辑器。VSCode是一个轻量级但是非常强大的代码编辑器&#xff0c;它支持多种编程语言&#xff08;如C,C#&#xff0c;Java&#xff0c;Python&#xff0c;PHP&#xff0…...

JMeter+Grafana+influxdb 配置出现transaction无数据情况解决办法

JMeterGrafanainfluxdb 配置出现transaction无数据情况解决办法 一、问题描述二、解决方法 一、问题描述 如下图所示出现application有数据但是transaction无数据情况 二、解决方法 需要做如下设置 打开变量设置如下图打开两个选项 然后再进行后端监听器的设置 如下图所…...

Acrobat Pro DC 2023 for Mac PDF编辑管理软件

Acrobat Pro DC 2023 for Mac是一款功能强大的PDF编辑和管理软件&#xff0c;旨在帮助用户轻松处理PDF文件。它提供了丰富的工具和功能&#xff0c;使用户可以创建、编辑、转换和注释PDF文件&#xff0c;以及填写和签署PDF表单。 软件下载&#xff1a;Acrobat Pro DC 2023 for …...

Python大型数据集(GPU)可视化和Pillow解释性视觉推理及材料粒子凝聚

&#x1f3af;要点 P​y​t​ho​n​图像​处理Pillow​库​&#xff1a;&#x1f3af;打开图像、保存图像、保存期间的压缩方式、读取方法、创建缩略图、创建图像查看器。&#x1f3af;获取 RGB 值&#xff0c;从图像中获取颜色&#xff0c;更改像素颜色&#xff0c;转换为黑…...

1、快速上手Docker:入门指南

文章目录 Linux中安装docker防火墙端口配置web项目需要的环境安装yarn安装nodejs安装脚手架并准备项目 构建镜像启动镜像查看日志管理镜像推送镜像 发布项目准备服务器环境部署项目&#xff1a; PS&#xff1a;扩展一点小知识 这篇文章只是docker入门的第一个Docker项目&#x…...

通用开发技能系列:Authentication、OAuth、JWT 认证策略

云原生学习路线导航页&#xff08;持续更新中&#xff09; 本文是 通用开发技能系列 文章&#xff0c;主要对编程通用技能 Authentication、OAuth、JWT 认证策略 进行学习 1.Basic Authentication认证 每个请求都需要将 用户名密码 进行base64编码后&#xff0c;放在请求头的A…...

【Leetcode】【240404】1614. Maximum Nesting Depth of the Parentheses

BGM&#xff08;&#xff1f;&#xff09;&#xff1a;圣堂之门-阿沁《梵谷的左耳》 Description A string is a valid parentheses string (denoted VPS) if it meets one of the following: It is an empty string “”, or a single character not equal to “(” or “)…...

联通iccid 19转20 使用luhn 算法的计算公式

联通iccid 19转20 使用luhn 算法的计算公式 第一次对接iccid 才知道 使用的是luhn 算法 19转20位 文章来源于 文章来源 当时也是一脸懵逼 的状态&#xff0c;然后各种chatgpt 寻找&#xff0c;怎么找都发现不对&#xff0c;最后看到这片java的文章实验是正确的&#xff0c;因…...

I.MX6ULL的MAC网络外设设备树实现说明一

一. 简介 IMX6ULL芯片内部集成了两个 10/100M 的网络 MAC 外设&#xff0c;所以&#xff0c;ALPHA开发板上的有线网络的硬件方案是&#xff1a; SOC内部集成网络MAC外设 PHY网络芯片方案。 本文来说明一下MAC网络外设的设备节点信息的实现。 因此&#xff0c; I.MX6ULL 网络…...

vue弹出的添加信息组件中 el-radio 单选框无法点击问题

情景描述:在弹出的添加信息的组件中的form中有一个单选框,单选框无法进行点击切换 原因如下: 单选框要求有个默认值,因为添加和更新操作复用同一个组件,所以我在初始化时对相关进行了判定,如果为空则赋初始值 结果这样虽然实现了初始值的展示,但是就是如此造成了单选框的无法切…...

蓝桥杯刷题day13——玩游戏【算法赛】

一、问题描述 小 A 和小 B 两个人在海边找到了 n 个石子&#xff0c;准备开始进行一些游戏&#xff0c;具体规则如下&#xff1a;小 B 首先将 n 个石子分成若干堆&#xff0c;接下来从小 A 开始小 A 和小 B 轮流取石子&#xff0c;每次可以任选一堆石子取走任意个&#xff0c;…...

Three.js——scene场景、几何体位置旋转缩放、正射投影相机、透视投影相机

个人简介 &#x1f440;个人主页&#xff1a; 前端杂货铺 &#x1f64b;‍♂️学习方向&#xff1a; 主攻前端方向&#xff0c;正逐渐往全干发展 &#x1f4c3;个人状态&#xff1a; 研发工程师&#xff0c;现效力于中国工业软件事业 &#x1f680;人生格言&#xff1a; 积跬步…...

springboot集成rabbitmq

一 添加pom <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-amqp</artifactId> </dependency>二&#xff0c;配置yml spring:rabbitmq:host: 192.168.56.200port: 5672username: adminpasswor…...

腾讯云轻量4核8G12M应用服务器性能测评和优惠价格表

腾讯云4核8G服务器价格&#xff1a;轻量4核8G12M优惠价格646元15个月、CVM S5服务器4核8G配置1437元买1年送3个月。腾讯云4核8G服务器支持多少人同时在线&#xff1f;支持30个并发数&#xff0c;可容纳日均1万IP人数访问。腾讯云百科txybk.com整理4核8G服务器支持多少人同时在线…...

判断点在多边形内的算法

在计算几何中&#xff0c;判定点是否在多边形内&#xff0c;是个非常有趣的问题。通常有两种方法&#xff1a; 一、Crossing Number&#xff08;交叉数&#xff09; 它计算从点P开始的射线穿过多边形边界的次数。当“交叉数”是偶数时&#xff0c;点在外面;当它是奇数时&…...

Network AIS Receiver R400N

目录 Introduction OVERVIEW BASIC FEATURES APPLICATIONS SPECIFICATIONS Introduction OVERVIEW The R400N provides a method of monitoring the position, speed and heading of AIS vessels within VHF range. It can decode of Class A, Class B, Aids to Navigat…...

JavaScript循环

JavaScript的循环有两种&#xff0c;一种是for循环&#xff0c;通过初始条件、结束条件和递增条件来循环执行语句块&#xff1a; var x 0; var i; for (i1; i<10000; i) { x x i; } x; // 50005000 for循环的3个条件都是可以省略的&#xff0c;如果没有退出循环的判断条件…...

9Proxy,跨境电商一站式解决方案

文章目录 跨境电商什么是跨境电商跨境电商的机遇跨境电商技术支撑 海外代理IP什么是海外代理IP海外代理IP的作用如何选择海外代理IP 9Proxy9Proxy的优势9Proxy的解决方案价格汇总搜索引擎优化市场调查多重核算数据抓取广告技术 价格上手体验注册登录下载安装数据采集 总结福利 …...

ObjectiveC-08-OOP面向对象程序设计-类的分离与组合

本节用一简短的文章来说下是ObjectiveC中的类。类其实是OOP中的一个概念&#xff0c;概念上简单来讲类是它是一组关系密切属性的集合&#xff0c;所谓的关系就是对现实事物的抽象。 上面提到的关系包括很多种&#xff0c;比如has a&#xff0c; is a&#xff0c;has some等&…...

Qt 总结

由于工作需要用到Qt。把过程中学习到的东西记录下来&#xff0c;希望能帮到他人和将来的自己。 由于需要快速实现需求&#xff0c;所以对Qt只是使用&#xff0c;并没有对原理的深入理解。 故此文只适合入门&#xff0c;不适合深入学习Qt。 文章目录 安装&维护示例&教…...

中间件复习之-RPC框架

什么是RPC框架&#xff1f; RPC(Remote Procedure Call):远程过程调用。当多个应用部署在多个服务器上时&#xff0c;由于他们不在一个内存空间上&#xff0c;因此需要网络来进行通信&#xff0c;而RPC允许它像调用本地方法一样调用远程服务。 RPC原理 服务消费方通过RPC客户…...

AcWing 787. 归并排序——算法基础课题解

AcWing 787. 归并排序 文章目录 题目描述CGo模板 题目描述 给定你一个长度为 n 的整数数列。 请你使用归并排序对这个数列按照从小到大进行排序。 并将排好序的数列按顺序输出。 输入格式 输入共两行&#xff0c;第一行包含整数 n。 第二行包含 n 个整数&#xff08;所有…...

力扣1379---找出克隆二叉树的相同节点(Java、DFS、简单题)

目录 题目描述&#xff1a; 思路描述&#xff1a; 代码&#xff1a; &#xff08;1&#xff09;&#xff1a; &#xff08;2&#xff09;&#xff1a; 题目描述&#xff1a; 给你两棵二叉树&#xff0c;原始树 original 和克隆树 cloned&#xff0c;以及一个位于原始树 ori…...

FLink学习(三)-DataStream

一、DataStream 1&#xff0c;支持序列化的类型有 基本类型&#xff0c;即 String、Long、Integer、Boolean、Array复合类型&#xff1a;Tuples、POJOs 和 Scala case classes Tuples Flink 自带有 Tuple0 到 Tuple25 类型 Tuple2<String, Integer> person Tuple2.…...

wordpress 建立数据库连接时出错/第三方平台推广引流

简述: 好久没有发布原创文章&#xff0c;一如既往&#xff0c;今天开始Kotlin浅谈系列的第十讲&#xff0c;一起来探索Kotlin中的序列。序列(Sequences)实际上是对应Java8中的Stream的翻版。从之前博客可以了解到Kotlin定义了很多操作集合的API&#xff0c;没错这些函数照样适用…...

常用来做网站首页的文件名/设计网站的软件

Jersey 提供对 Spring DI 的扩展。使得 Jersey 在使用 Spring bean 时 就像是 JAX-RS 的组件 (比如 资源和提供者) 并且允许 Spring 注入 Jersey 管理的组件中。比如&#xff1a; import javax.ws.rs.GET; import javax.ws.rs.Path; import org.springframework.stereotype.Com…...

2019年做网站还有机会吗/制造业中小微企业

Determine file-access permission.int _access( const char *path, int mode );声明于 io.h #include <io.h> C _access和_waccess的使用方法 概述 头文件&#xff1a;<io.h> 判断文件的访问权限 原型 int _access( const char *path, int mode ); i…...

淘宝网站建设哪个类目/营销成功的案例

文章目录简单选择排序基本思想&#xff1a;以炒股为喻&#xff0c;冒泡像炒短线&#xff0c;选择则是炒长线代码&#xff1a;交换次数非常少时间复杂度:O(n2)O(n^2)O(n2)堆排序&#xff1a;充分利用了完全二叉树的深度和序号信息堆 heap堆排序的原理堆排序的例子堆排序的代码&a…...

网站建设初学者必学/seo 优化公司

目录 分析静态页面静态vs动态本次项目页面分析模板抽取base目录下的base.htmlnewsnews下主页index.htmlnews下的new_detail.htmlnews下search.htmldocdoc下docDownload.htmlusersusers下的login.htmlusers下的registercoursecourse下的course.htmlcourse下的course_detail.html…...

惠州网站设计培训/网址收录查询

1、多态定义多态指的是一类事物的多种形态比如动物有多种形态&#xff1a;人&#xff0c;狗&#xff0c;猪importabcclass Animal(metaclassabc.ABCMeta):abc.abstractmethoddeftalk(self):passclassPeople(Animal):deftalk(self):print(say people)classDog(Animal):deftalk(s…...