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

【vue3|第8期】深入理解Vue 3 computed计算属性

日期:2024年6月10日
作者:Commas
签名:(ง •_•)ง 积跬步以致千里,积小流以成江海……
注释:如果您觉得有所帮助,帮忙点个赞,也可以关注我,我们一起成长;如果有不对的地方,还望各位大佬不吝赐教,谢谢^ - ^
1.01365 = 37.7834;0.99365 = 0.0255
1.02365 = 1377.4083;0.98365 = 0.0006

说在最前面:本文 vue3 的示例代码,在没有另外声名的情况下,均采用 <script setup> 代码风格,风格统一,避免混乱,请各位新老食客放心食用哈 ^ _ ^


文章目录

  • 一、前言
  • 二、计算属性的基本概念
  • 三、计算属性的优势
  • 四、计算属性与方法的区别
  • 五、计算属性的 getter 和 setter
  • 六、Computed属性的基本应用
  • 七、Computed属性的高级应用
  • 八、注意事项
  • 九、总结


在这里插入图片描述


一、前言

Vue3 的世界里,计算属性(computed)是一个非常强大且实用的特性。它为我们在处理数据依赖动态计算方面提供了极大的便利。今天,就让我们一起来深入探讨 Vue3 中的 computed

二、计算属性的基本概念

计算属性本质上是基于其依赖的数据进行计算并返回结果的属性。它可以根据已有的数据自动计算出一个新的值,并且只有在其依赖的数据发生变化时才会重新计算。

换而言之,计算属性允许我们声明式地定义一个依赖于其他数据的计算值。在 Vue2 中,计算属性是基于 gettersetter 实现的。而在 Vue3 中,计算属性得到了进一步的优化,使用了 ES6Proxy 特性,使得实现更为简洁和高效。

三、计算属性的优势

  • 响应式依赖:计算属性是基于其依赖项进行缓存的。如果依赖项发生变化,计算属性会重新计算并更新。这使得我们能够更好地管理响应式数据。
  • 简洁的语法Vue3 中的计算属性使用了 ES6Proxy 特性,使得代码更加简洁易读。
  • 高效的性能:由于计算属性是基于依赖项进行缓存的,因此只有当依赖项发生变化时才会重新计算,这大大提高了应用程序的性能。这种缓存机制也使得 computed 属性在性能上优于 methods 方法,尤其是在复杂计算中。

四、计算属性与方法的区别

虽然计算属性和方法都能实现相同的功能(基于数据计算值),但它们在本质上是不同的。

  • 计算属性是基于其依赖的数据进行缓存的,只有在数据变化时才会重新计算。
  • 方法是每次调用时都会执行相应的函数体,无论依赖的数据是否发生变化。

五、计算属性的 getter 和 setter

计算属性不仅可以有 getter 函数用于获取计算结果,还可以定义 setter 函数来实现对计算结果的设置,从而影响其依赖的数据。

fullName = computed{get() {return this.firstName + ' + this.lastName;},set(value) {const [firstName, lastName] = value.split(' ');this.firstName = firstName;this.lastName = lastName;}
}

六、Computed属性的基本应用

Vue3 中,使用计算属性非常简单。首先,我们需要在组件的 computed 选项中定义计算属性:

<script setup>
import { ref, computed } from 'vue';
const count = ref(0);// 计算属性声名
const doubled = computed(() => count.value * 2);
</script>

在上面的例子中,我们定义了一个名为doubled的计算属性,它依赖于count变量。每当count发生变化时,doubled也会重新计算。

七、Computed属性的高级应用

除了基本的数据计算,computed 属性还可以用于更复杂的场景,如**处理异步操作****和依赖多个数据源。**例如,我们可以使用 computed 属性来过滤一个列表:

<template><div><input v-model="searchText" /><ul><li v-for="item in filteredItems" :key="item.id">{{ item.name }}</li></ul></div>
</template><script setup>
import { ref, computed } from 'vue';const searchText = ref('');const items = ref([{ id: 1, name: 'Commas.1' },{ id: 2, name: 'Commas.2' },]);// 计算属性声名const filteredItems = computed(() => {if (!searchText.value) {return items.value;}return items.value.filter(item => item.name.includes(searchText.value));});</script>

在这个例子中,filteredItems 是一个 computed 属性,它根据 searchText 的值来过滤 items 列表。当用户输入搜索文本时,列表会自动更新以显示匹配的项目。

八、注意事项

  • 计算属性应该避免进行复杂的 DOM 操作或异步操作,这些操作应该放在 methods生命周期钩子中处理。
  • 当计算属性依赖的数据发生变化时,Vue 会自动重新计算该计算属性的值。但是,如果计算属性依赖的数据是异步获取的(例如从 API 请求中获取),那么你可能需要使用 watch 或其他机制来确保在数据真正变化时重新计算计算属性的值。

九、总结

Vue3 的计算属性是一个强大的工具,它让我们能够以声明式的方式处理响应式数据的计算。通过了解计算属性的工作机制、优势和使用方法,我们可以更好地构建高效、简洁的 Vue 应用程序。


参考文章:

  • Vue.js

------<>

版权声明:本文为博主原创文章,如需转载,请给出:
原文链接:https://blog.csdn.net/qq_35844043/article/details/139585020

相关文章:

【vue3|第8期】深入理解Vue 3 computed计算属性

日期&#xff1a;2024年6月10日 作者&#xff1a;Commas 签名&#xff1a;(ง •_•)ง 积跬步以致千里,积小流以成江海…… 注释&#xff1a;如果您觉得有所帮助&#xff0c;帮忙点个赞&#xff0c;也可以关注我&#xff0c;我们一起成长&#xff1b;如果有不对的地方&#xf…...

《精通ChatGPT:从入门到大师的Prompt指南》附录C:专业术语表

附录C&#xff1a;专业术语表 本附录旨在为读者提供一本全面的术语表&#xff0c;帮助理解《精通ChatGPT&#xff1a;从入门到大师的Prompt指南》中涉及的各种专业术语。无论是初学者还是高级用户&#xff0c;这些术语的定义和解释将为您在使用ChatGPT时提供重要参考。 A AI&…...

YOLOv8可视化界面PYQT5

yolov8&#xff0c;可视化界面pyqt。支持图片检测&#xff0c;视频检测&#xff0c;摄像头检测等&#xff0c;实时显示检测画面。支持自定义数据集&#xff0c;计数&#xff0c;fps展示……,即插即用&#xff0c;无需更改太多代码...

远程代码执行和远程命令执行是一个东西吗

远程代码执行&#xff08;Remote Code Execution&#xff0c;简称RCE&#xff09;和远程命令执行在概念上有所区别&#xff0c;但两者都涉及到攻击者通过远程方式在目标系统上执行代码或命令。以下是两者的详细比较&#xff1a; 定义&#xff1a; 远程代码执行&#xff08;RCE…...

C++ 20新特性之线程与jthread

&#x1f4a1; 如果想阅读最新的文章&#xff0c;或者有技术问题需要交流和沟通&#xff0c;可搜索并关注微信公众号“希望睿智”。 为什么要引入jthread 在C 11中&#xff0c;已经引入了std::thread。std::thread为C标准库带来了一流的线程支持&#xff0c;极大地促进了多线程…...

赶紧收藏!2024 年最常见 20道并发编程面试题(七)

上一篇地址&#xff1a;赶紧收藏&#xff01;2024 年最常见 20道并发编程面试题&#xff08;六&#xff09;-CSDN博客 十三、什么是线程局部存储&#xff08;Thread-Local Storage&#xff09;&#xff1f; 线程局部存储&#xff08;Thread-Local Storage&#xff0c;简称TLS…...

HAL库开发--第一盏灯

知不足而奋进 望远山而前行 目录 文章目录 前言 学习目标 学习内容 需求 开发流程 项目创建 芯片配置 功能配置 时钟配置 项目配置 编写代码 编译测试 烧录失败解决 ​编辑 总结 前言 在嵌入式系统开发中&#xff0c;掌握HAL库开发流程、STMCubeMX配置过程以及…...

Linux C语言:变量的作用域和生命周期(auto、register、static和extern)

一、变量存储类型-auto 1、auto变量的说明 变量在程序中使用时,必须预先说明它们的存储类型和数据类型。 变量说明的一般形式是&#xff1a; <存储类型> <数据类型 > <变量名> &#xff1b; <存储类型>是关键词auto、register、static和extern<…...

AI Stable diffusion 报错:稳定扩散模型加载失败,退出

可能是内存不够&#xff0c;看看你最近是加了新的大的模型&#xff0c;可以把你的stable-diffusion-webui\models\Stable-diffusion目录下的某个ckpt删除掉&#xff0c;可能ckpt太大&#xff0c;无法加载成功&#xff1b; Stable diffusion model failed to load, exiting 如图…...

[Python学习篇] Python循环语句

while 循环 语法&#xff1a; while 条件: 条件成立后会重复执行的代码 ...... 示例1&#xff1a;死循环 # 这是一个死循环示例 while True:print("我正在重复执行")示例2&#xff1a;循环指定次数 i 1 while i < 5:print(f"执行次数 {i}")…...

MongoDB 正则表达式

MongoDB 正则表达式 MongoDB 是一个流行的 NoSQL 数据库&#xff0c;它提供了强大的查询功能&#xff0c;包括对正则表达式的支持。正则表达式是一种强大的文本搜索工具&#xff0c;它允许用户根据特定的模式匹配和搜索字符串。在 MongoDB 中&#xff0c;正则表达式可以用于查…...

Django配置连接池:使用django-db-connection-pool配置连接池

一、该三方库文档使用 github地址&#xff1a; https://github.com/altairbow/django-db-connection-pool/blob/1.2.5/README_CN.mdhttps://github.com/altairbow/django-db-connection-pool/blob/1.2.5/README_CN.md1、选择指定版本&#xff0c;查看指定版本的文档和配置&am…...

SpringBoot整合钉钉实现消息推送

前言 钉钉作为一款企业级通讯工具&#xff0c;具有广泛的应用场景&#xff0c;包括但不限于团队协作、任务提醒、工作汇报等。 通过Spring Boot应用程序整合钉钉实现消息推送&#xff0c;我们可以实现以下功能&#xff1a; 实时向指定用户或群组发送消息通知。自定义消息内容…...

【机器学习】集成学习方法:Bagging与Boosting的应用与优势

&#x1f525; 个人主页&#xff1a;空白诗 文章目录 引言一、集成学习的定义二、Bagging方法1. 随机森林&#xff08;Random Forest&#xff09;2. 其他Bagging方法 二、Boosting方法1. 梯度提升树&#xff08;Gradient Boosting Machine, GBM&#xff09;解释GBM的基本原理和…...

工业 web4.0 的 UI 卓越非凡

工业 web4.0 的 UI 卓越非凡...

C语言 | Leetcode C语言题解之第145题二叉树的后序遍历

题目&#xff1a; 题解&#xff1a; void addPath(int *vec, int *vecSize, struct TreeNode *node) {int count 0;while (node ! NULL) {count;vec[(*vecSize)] node->val;node node->right;}for (int i (*vecSize) - count, j (*vecSize) - 1; i < j; i, --j)…...

如何在 Vue 3 中使用 vue3-print-nb 实现灵活的前端打印

你好&#xff0c;我是小白Coding日志&#xff0c;一个热爱技术的程序员。在这里&#xff0c;我分享自己在编程和技术世界中的学习心得和体会。希望我的文章能够给你带来一些灵感和帮助。欢迎来到我的博客&#xff0c;一起在技术的世界里探索前行吧&#xff01; 前言 在前端开…...

Go Module详解

&#x1f49d;&#x1f49d;&#x1f49d;欢迎莅临我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:「stormsha的主页」…...

基于51单片机的智能水表

一.硬件方案 本设计主要以51单片机作为主控处理器的智能水表&#xff0c;该水表能够记录总的用水量和单次用水量&#xff0c;当用水量超出设定值时系统发出声光报警提醒&#xff0c;水量报警值能够通过按键进行自行设置&#xff0c;并且存储于AT24C02中&#xff0c;并且可以测…...

SQLServer 借助Navcate做定时备份的脚本

首先创建SQLServer链接&#xff0c;然后在Query标签种创建一个查询 查询内容如下 use ChengYuMES declare ls_time varchar(1000) declare ls_dbname varchar(1000) set ls_time convert(varchar, getdate(), 112) _ replace(convert(varchar, getdate(), 108), :, )-- 需…...

基于FPGA的PID算法学习———实现PID比例控制算法

基于FPGA的PID算法学习 前言一、PID算法分析二、PID仿真分析1. PID代码2.PI代码3.P代码4.顶层5.测试文件6.仿真波形 总结 前言 学习内容&#xff1a;参考网站&#xff1a; PID算法控制 PID即&#xff1a;Proportional&#xff08;比例&#xff09;、Integral&#xff08;积分&…...

React第五十七节 Router中RouterProvider使用详解及注意事项

前言 在 React Router v6.4 中&#xff0c;RouterProvider 是一个核心组件&#xff0c;用于提供基于数据路由&#xff08;data routers&#xff09;的新型路由方案。 它替代了传统的 <BrowserRouter>&#xff0c;支持更强大的数据加载和操作功能&#xff08;如 loader 和…...

3.3.1_1 检错编码(奇偶校验码)

从这节课开始&#xff0c;我们会探讨数据链路层的差错控制功能&#xff0c;差错控制功能的主要目标是要发现并且解决一个帧内部的位错误&#xff0c;我们需要使用特殊的编码技术去发现帧内部的位错误&#xff0c;当我们发现位错误之后&#xff0c;通常来说有两种解决方案。第一…...

java 实现excel文件转pdf | 无水印 | 无限制

文章目录 目录 文章目录 前言 1.项目远程仓库配置 2.pom文件引入相关依赖 3.代码破解 二、Excel转PDF 1.代码实现 2.Aspose.License.xml 授权文件 总结 前言 java处理excel转pdf一直没找到什么好用的免费jar包工具,自己手写的难度,恐怕高级程序员花费一年的事件,也…...

使用分级同态加密防御梯度泄漏

抽象 联邦学习 &#xff08;FL&#xff09; 支持跨分布式客户端进行协作模型训练&#xff0c;而无需共享原始数据&#xff0c;这使其成为在互联和自动驾驶汽车 &#xff08;CAV&#xff09; 等领域保护隐私的机器学习的一种很有前途的方法。然而&#xff0c;最近的研究表明&…...

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院挂号小程序

一、开发准备 ​​环境搭建​​&#xff1a; 安装DevEco Studio 3.0或更高版本配置HarmonyOS SDK申请开发者账号 ​​项目创建​​&#xff1a; File > New > Create Project > Application (选择"Empty Ability") 二、核心功能实现 1. 医院科室展示 /…...

React19源码系列之 事件插件系统

事件类别 事件类型 定义 文档 Event Event 接口表示在 EventTarget 上出现的事件。 Event - Web API | MDN UIEvent UIEvent 接口表示简单的用户界面事件。 UIEvent - Web API | MDN KeyboardEvent KeyboardEvent 对象描述了用户与键盘的交互。 KeyboardEvent - Web…...

MySQL用户和授权

开放MySQL白名单 可以通过iptables-save命令确认对应客户端ip是否可以访问MySQL服务&#xff1a; test: # iptables-save | grep 3306 -A mp_srv_whitelist -s 172.16.14.102/32 -p tcp -m tcp --dport 3306 -j ACCEPT -A mp_srv_whitelist -s 172.16.4.16/32 -p tcp -m tcp -…...

基于matlab策略迭代和值迭代法的动态规划

经典的基于策略迭代和值迭代法的动态规划matlab代码&#xff0c;实现机器人的最优运输 Dynamic-Programming-master/Environment.pdf , 104724 Dynamic-Programming-master/README.md , 506 Dynamic-Programming-master/generalizedPolicyIteration.m , 1970 Dynamic-Programm…...

让回归模型不再被异常值“带跑偏“,MSE和Cauchy损失函数在噪声数据环境下的实战对比

在机器学习的回归分析中&#xff0c;损失函数的选择对模型性能具有决定性影响。均方误差&#xff08;MSE&#xff09;作为经典的损失函数&#xff0c;在处理干净数据时表现优异&#xff0c;但在面对包含异常值的噪声数据时&#xff0c;其对大误差的二次惩罚机制往往导致模型参数…...