当前位置: 首页 > 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), :, )-- 需…...

SkyWalking 10.2.0 SWCK 配置过程

SkyWalking 10.2.0 & SWCK 配置过程 skywalking oap-server & ui 使用Docker安装在K8S集群以外&#xff0c;K8S集群中的微服务使用initContainer按命名空间将skywalking-java-agent注入到业务容器中。 SWCK有整套的解决方案&#xff0c;全安装在K8S群集中。 具体可参…...

云计算——弹性云计算器(ECS)

弹性云服务器&#xff1a;ECS 概述 云计算重构了ICT系统&#xff0c;云计算平台厂商推出使得厂家能够主要关注应用管理而非平台管理的云平台&#xff0c;包含如下主要概念。 ECS&#xff08;Elastic Cloud Server&#xff09;&#xff1a;即弹性云服务器&#xff0c;是云计算…...

最新SpringBoot+SpringCloud+Nacos微服务框架分享

文章目录 前言一、服务规划二、架构核心1.cloud的pom2.gateway的异常handler3.gateway的filter4、admin的pom5、admin的登录核心 三、code-helper分享总结 前言 最近有个活蛮赶的&#xff0c;根据Excel列的需求预估的工时直接打骨折&#xff0c;不要问我为什么&#xff0c;主要…...

Cloudflare 从 Nginx 到 Pingora:性能、效率与安全的全面升级

在互联网的快速发展中&#xff0c;高性能、高效率和高安全性的网络服务成为了各大互联网基础设施提供商的核心追求。Cloudflare 作为全球领先的互联网安全和基础设施公司&#xff0c;近期做出了一个重大技术决策&#xff1a;弃用长期使用的 Nginx&#xff0c;转而采用其内部开发…...

ABAP设计模式之---“简单设计原则(Simple Design)”

“Simple Design”&#xff08;简单设计&#xff09;是软件开发中的一个重要理念&#xff0c;倡导以最简单的方式实现软件功能&#xff0c;以确保代码清晰易懂、易维护&#xff0c;并在项目需求变化时能够快速适应。 其核心目标是避免复杂和过度设计&#xff0c;遵循“让事情保…...

NXP S32K146 T-Box 携手 SD NAND(贴片式TF卡):驱动汽车智能革新的黄金组合

在汽车智能化的汹涌浪潮中&#xff0c;车辆不再仅仅是传统的交通工具&#xff0c;而是逐步演变为高度智能的移动终端。这一转变的核心支撑&#xff0c;来自于车内关键技术的深度融合与协同创新。车载远程信息处理盒&#xff08;T-Box&#xff09;方案&#xff1a;NXP S32K146 与…...

安全突围:重塑内生安全体系:齐向东在2025年BCS大会的演讲

文章目录 前言第一部分&#xff1a;体系力量是突围之钥第一重困境是体系思想落地不畅。第二重困境是大小体系融合瓶颈。第三重困境是“小体系”运营梗阻。 第二部分&#xff1a;体系矛盾是突围之障一是数据孤岛的障碍。二是投入不足的障碍。三是新旧兼容难的障碍。 第三部分&am…...

C/C++ 中附加包含目录、附加库目录与附加依赖项详解

在 C/C 编程的编译和链接过程中&#xff0c;附加包含目录、附加库目录和附加依赖项是三个至关重要的设置&#xff0c;它们相互配合&#xff0c;确保程序能够正确引用外部资源并顺利构建。虽然在学习过程中&#xff0c;这些概念容易让人混淆&#xff0c;但深入理解它们的作用和联…...

【C++特殊工具与技术】优化内存分配(一):C++中的内存分配

目录 一、C 内存的基本概念​ 1.1 内存的物理与逻辑结构​ 1.2 C 程序的内存区域划分​ 二、栈内存分配​ 2.1 栈内存的特点​ 2.2 栈内存分配示例​ 三、堆内存分配​ 3.1 new和delete操作符​ 4.2 内存泄漏与悬空指针问题​ 4.3 new和delete的重载​ 四、智能指针…...

Python训练营-Day26-函数专题1:函数定义与参数

题目1&#xff1a;计算圆的面积 任务&#xff1a; 编写一个名为 calculate_circle_area 的函数&#xff0c;该函数接收圆的半径 radius 作为参数&#xff0c;并返回圆的面积。圆的面积 π * radius (可以使用 math.pi 作为 π 的值)要求&#xff1a;函数接收一个位置参数 radi…...