【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


文章目录

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


在这里插入图片描述


一、前言

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

二、计算属性的基本概念

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

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

三、计算属性的优势

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

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

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

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

五、计算属性的 getter 和 setter

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

computed: {fullName: {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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/25920.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

合约ABI探秘

EOA使用ABI调用 合约之间使用接口调用 自己写ABI&#xff0c;自己写接口 ABI探秘 EOA使用的ABI数据与合约间调用时调用者持有的接口时等价的&#xff0c;都是对合约函数签名的完整描述调用者使用ABI数据生成message中的calldata message上下文的变化 合约之间的调用也模拟…

8.11 矢量图层线要素单一符号使用六(光栅线)

文章目录 前言光栅线&#xff08;Raster Line&#xff09;QGis设置线符号为光栅线&#xff08;Raster Line&#xff09;二次开发代码实现光栅线&#xff08;Raster Line&#xff09; 总结 前言 本章介绍矢量图层线要素单一符号中光栅线&#xff08;Raster Line&#xff09;的使…

node设置镜像源详细教程

在Node.js环境中&#xff0c;你可以通过设置npm或yarn的镜像源来加速依赖包的下载。以下是如何设置npm和yarn的镜像源的详细步骤&#xff1a; 使用npm设置镜像源 临时设置镜像源&#xff1a; 你可以在安装包时临时指定镜像源&#xff0c;例如&#xff1a; npm install package…

FastWeb网站开发之拦截器(interceptor)使用教程

拦截器用于拦截和处理HTTP请求和响应。在请求开始处理之前进行拦截过滤与处理。 API文档 拦截器一般用于初始化lua脚本中创建拦截规则。 它主要用于浏览器的请求中某些目录或文件不允许访问、某些目录需要验证权限&#xff0c;在拦截器中进行判断并选择是否继续向下执行。 …

在Spigot插件中配置指令

在Spigot插件中配置指令 在Spigot插件开发中&#xff0c;配置指令&#xff08;命令&#xff09;是非常重要的一部分。通过自定义指令&#xff0c;玩家可以与插件进行交互&#xff0c;触发特定的功能和行为。本文将详细介绍如何在Spigot插件中配置指令&#xff0c;并通过一个简…

【C语言】32个关键字

C语言32个关键字 文章目录 C语言32个关键字1.数据类型关键字基本数据类型&#xff08;5个&#xff09;类型修饰关键字&#xff08;4个&#xff09;复杂类型关键字&#xff08;5个&#xff09;存储级别关键字&#xff08;6个&#xff09; 2.流程控制关键字跳转结构&#xff08;4…

如何通过加密U盘 实现数据传输闭环管控?

加密U盘是用来保护存储在其中数据的安全的。通过加密技术&#xff0c;用户可以将其敏感文件和信息存储在U盘中&#xff0c;并设置密码或使用其他加密方法来防止未经授权的访问。这种安全措施可以防止数据泄露或盗窃&#xff0c;特别是在丢失或被盗的情况下&#xff0c;确保数据…

一些简单却精妙的算法

文章目录 1.树状数组2.红黑树3.星星打分4.欧几里得算法5.快速幂6.并查集 在编程的世界里&#xff0c;简洁的代码往往隐藏着深邃的智慧。一起来看看那些看似简单&#xff0c;实则精妙绝伦的代码片段&#xff0c;体会编程语言的优雅与力量。 1.树状数组 int lowbit(int x) { …

机床联网第一课

一、不是废话的废话 照例第一篇文章先介绍下整个专栏系列的内容和背景&#xff0c;这篇文章不涉及任何代码和技术知识&#xff0c;大家都能看得懂。 1、写作初衷 自入行接触设备数据采集、设备联网工作近十年&#xff0c;期间记不清有多少次有人请我帮忙去处理公司外部的项目&…

软件下载网站源码附手机版和图文教程

PHP游戏应用市场APP软件下载平台网站源码手机版 可自行打包APP&#xff0c;带下载统计&#xff0c;带多套模板&#xff0c;带图文教程&#xff0c;可以做软件库&#xff0c;也可以做推广app下载等等&#xff0c;需要的朋友可以下载 源码下载 软件下载网站源码附手机版和图文…

新加坡高防服务器的特点

新加坡高防服务器是指位于新加坡的高性能、高安全性的服务器&#xff0c;通常用于托管网站、应用程序和其他在线服务。这类服务器通常具有以下特点&#xff0c;rak部落为您整理发布。 1. 高速网络连接&#xff1a;新加坡是亚洲地区的主要互联网枢纽&#xff0c;拥有高质量的网络…

Android14之向build.prop添加属性(二百一十九)

简介: CSDN博客专家,专注Android/Linux系统,分享多mic语音方案、音视频、编解码等技术,与大家一起成长! 优质专栏:Audio工程师进阶系列【原创干货持续更新中……】🚀 优质专栏:多媒体系统工程师系列【原创干货持续更新中……】🚀 优质视频课程:AAOS车载系统+AOSP…

神经网络初始化实例化的维度与调用输入数据的维度

神经网络初始化实例化的维度与调用输入数据的维度 import numpy as np import torch import torch.nn as nn import torch.nn.functional as F #from agents.helpers import SinusoidalPosEmb class SinusoidalPosEmb(nn.Module): def init(self, dim16): #dim为初始化需要设…

人脸识别和 ArcFace:用于深度人脸识别的附加角边际损失

在本文中,您将发现一种 ArcFace 方法,该方法可获得用于人脸识别的高分辨特征。阅读本文后,你将了解: 人脸识别任务如何工作。如何计算人脸匹配。SoftMax 和 ArcFace 的直观区别。ArcFace 的几何解释。ArcFace 背后的数学原理本文假定您已经熟悉用于多类分类、检测和 SoftMax…

电子设计类论文降低重复率的方法

1、知网学位论文检测为整篇上传&#xff0c;格式对检测结果可能会造成影响&#xff0c;需要将最终交稿格式提交检测&#xff0c;将影响降到最小&#xff0c;此影响为几十字的小段可能检测不出。对于3万字符以上文字较多的论文是可以忽略的。 2、上传论文后&#xff0c;系统会自…

2024.6.11总结

今天做个面试小结吧。面试了十几家android开发岗&#xff0c;在技术面都挂了。一家软件测试岗&#xff0c;二面挂了。 可见&#xff0c;一般面试有三轮&#xff0c;分别为hr面&#xff0c;专业面&#xff08;也称技术面&#xff09;和主管面。 hr面:之前广州电信的hr面挂了&a…

Vuepress 2从0-1保姆级进阶教程——标准化流程(Tailwindcss+autoprefixer+commitizen)

Vuepress 2 专栏目录【已完结】 1. 入门阶段 Vuepress 2从0-1保姆级入门教程——环境配置篇Vuepress 2从0-1保姆级入门教程——安装流程篇Vuepress 2从0-1保姆级入门教程——文档配置篇Vuepress 2从0-1保姆级入门教程——主题与部署 2.进阶阶段 Vuepress 2从0-1保姆级进阶教程—…

电影推荐系统的设计

管理员账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;管理员管理&#xff0c;用户管理&#xff0c;免费电影管理&#xff0c;付费电影管理&#xff0c;电影论坛管理 前台账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;付费电影&#x…

element-plus的el-space标签的使用

el-space标签可以很方便的设置标签间距和分隔符&#xff0c;对齐方式&#xff0c;是否拆行等属性。 <script setup lang"ts"> import { onMounted, ref } from vue;const sizeref(30)</script><template><el-space wrap :size"size"…

【最新鸿蒙应用开发】——类Web开发范式2——前端语法

兼容JS的类Web开发范式 JS FA应用的JS模块(entry/src/main/js/module)的典型开发目录结构如下&#xff1a; 1. 项目基本结构 1.1. 目录结构 1.2. 项目文件分类如下&#xff1a; .hml结尾的HML模板文件&#xff0c;这个文件用来描述当前页面的文件布局结构。 .css结尾的CSS样…