Vue学习之计算属性

模板中的表达式虽然方便,但也只能用来做简单的操作。如果在模板中写太多逻辑,会让模板变得臃肿,难以维护。比如说,我们有这样一个包含嵌套数组的对象:

const author = reactive({name: 'John Doe',books: ['Vue 2 - Advanced Guide','Vue 3 - Basic Guide','Vue 4 - The Mystery']
})

我们想根据 author 是否已有一些书籍来展示不同的信息:

<p>Has published books:</p>
<span>{{ author.books.length > 0 ? 'Yes' : 'No' }}</span>

这里的模板看起来有些复杂。我们必须认真看好一会儿才能明白它的计算依赖于 author.books。更重要的是,如果在模板中需要不止一次这样的计算,我们可不想将这样的代码在模板里重复好多遍。

因此我们推荐使用计算属性来描述依赖响应式状态的复杂逻辑。这是重构后的示例:

vue

<script setup>
import { reactive, computed } from 'vue'
//reactive用于对象或者数组,ref常用于字符串
const author = reactive({name: 'John Doe',books: ['Vue 2 - Advanced Guide','Vue 3 - Basic Guide','Vue 4 - The Mystery']
})// 一个计算属性 ref
const publishedBooksMessage = computed(() => {return author.books.length > 0 ? 'Yes' : 'No'
})
</script><template><p>Has published books:</p><span>{{ publishedBooksMessage }}</span>
</template>

我们在这里定义了一个计算属性 publishedBooksMessage。computed() 方法期望接收一个 getter 函数,返回值为一个计算属性 ref。和其他一般的 ref 类似,你可以通过 publishedBooksMessage.value 访问计算结果。计算属性 ref 也会在模板中自动解包,因此在模板表达式中引用时无需添加 .value。

Vue 的计算属性会自动追踪响应式依赖。它会检测到 publishedBooksMessage 依赖于 author.books,所以当 author.books 改变时,任何依赖于 publishedBooksMessage 的绑定都会同时更新。

也可参考:为计算属性标注类型

计算属性缓存 vs 方法 ​

你可能注意到我们在表达式中像这样调用一个函数也会获得和计算属性相同的结果:

template
<p>{{ calculateBooksMessage() }}</p>
js
// 组件中
function calculateBooksMessage() {return author.books.length > 0 ? 'Yes' : 'No'
}

若我们将同样的函数定义为一个方法而不是计算属性,两种方式在结果上确实是完全相同的,然而,不同之处在于计算属性值会基于其响应式依赖被缓存。一个计算属性仅会在其响应式依赖更新时才重新计算。这意味着只要 author.books 不改变,无论多少次访问 publishedBooksMessage 都会立即返回先前的计算结果,而不用重复执行 getter 函数。

这也解释了为什么下面的计算属性永远不会更新,因为 Date.now() 并不是一个响应式依赖:

js

const now = computed(() => Date.now())

相比之下,方法调用总是会在重渲染发生时再次执行函数。

为什么需要缓存呢?想象一下我们有一个非常耗性能的计算属性 list,需要循环一个巨大的数组并做许多计算逻辑,并且可能也有其他计算属性依赖于 list。没有缓存的话,我们会重复执行非常多次 list 的 getter,然而这实际上没有必要!如果你确定不需要缓存,那么也可以使用方法调用。

可写计算属性 ​

计算属性默认是只读的。当你尝试修改一个计算属性时,你会收到一个运行时警告。只在某些特殊场景中你可能才需要用到“可写”的属性,你可以通过同时提供 getter 和 setter 来创建:

<script setup>
import { ref, computed } from 'vue'const firstName = ref('John')
const lastName = ref('Doe')const fullName = computed({// getterget() {return firstName.value + ' ' + lastName.value},// setterset(newValue) {// 注意:我们这里使用的是解构赋值语法[firstName.value, lastName.value] = newValue.split(' ')}
})
</script>

现在当你再运行 fullName.value = ‘John Doe’ 时,setter 会被调用而 firstName 和 lastName 会随之更新。

最佳实践 ​

Getter 不应有副作用 ​

计算属性的 getter 应只做计算而没有任何其他的副作用,这一点非常重要,请务必牢记。举例来说,不要改变其他状态、在 getter 中做异步请求或者更改 DOM!一个计算属性的声明中描述的是如何根据其他值派生一个值。因此 getter 的职责应该仅为计算和返回该值。在之后的指引中我们会讨论如何使用侦听器根据其他响应式状态的变更来创建副作用。

避免直接修改计算属性值 ​

从计算属性返回的值是派生状态。可以把它看作是一个“临时快照”,每当源状态发生变化时,就会创建一个新的快照。更改快照是没有意义的,因此计算属性的返回值应该被视为只读的,并且永远不应该被更改——应该更新它所依赖的源状态以触发新的计算

以下是几个升级的实例:
(1)根据输入出版书籍数量筛选作者
(2)根据输入姓名拆分姓和名分别显示
(3)根据输入的身份证号动态获取出生日期

<script setup>
import { reactive,ref, computed } from 'vue'const author = reactive([{name: 'John Doe',books: ['Vue 2 - Advanced Guide','Vue 3 - Basic Guide','Vue 4 - The Mystery']
},
{name: 'Mike',books: ['Vue 2 - Advanced Guide',]
},
{name: 'Mike2',books: ['Vue 2 - Advanced Guide','Vue 3 - Basic Guide','Vue 4 - The Mystery']
}])
const firstName=ref('张')
const lasnAME=ref("三")//根据数据值计算
const publishedBooksMessage = computed(() => {const returnMsg=ref('')for(var i=0;i<author.length;i++){returnMsg.value+=author[i].books.length==bookNumLimit.value?author[i].name+"、":''}returnMsg.value=returnMsg.value.substring(0,returnMsg.value.length-1)return returnMsg.value
})
//根据输入值获取姓和名
const fullName1=computed({get(){return firstName.value+' '+lasnAME.value},set(newValue){if(newValue.length>=3){[firstName.value,lasnAME.value]=newValue.split(' ')}else{firstName.value=''lasnAME.value=''}}
})
const idCard=ref('')
const year=ref('')
const month=ref('')
const day=ref('')
//根据身份证号计算出生日期
const birthDay=computed(() => {if(idCard.value.length==18){const  newValue=idCard.value.substring(6,14);year.value=newValue.substring(0,4)month.value=newValue.substring(4,6)day.value=newValue.substring(6,8)}else{return '';}return year.value+"/"+month.value+"/"+day.value})
const selectValue=ref('')
const bookNumLimit=ref(0)</script><template>书籍数量:<input v-model="bookNumLimit"><p>已发书籍作者:</p><span>{{ publishedBooksMessage }}</span><br/>输入姓名:<input  v-model="fullName1" val=""><br/>姓:<span>{{ firstName}}</span><br/>名:<span>{{ lasnAME}}</span>
<br/>
身份证号:<input  v-model="idCard" ><br/>
出生年月:{{ birthDay}}
</template>

实现效果:
在这里插入图片描述
在这里插入图片描述
修改身份证号,出生年月随之修改
在这里插入图片描述

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

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

相关文章

【算法与数据结构】1971、LeetCode寻找图中是否存在路径

文章目录 一、题目二、解法三、完整代码 所有的LeetCode题解索引&#xff0c;可以看这篇文章——【算法和数据结构】LeetCode题解。 一、题目 二、解法 思路分析&#xff1a;本题应用并查集的理论直接就可以解决&#xff1a;【算法与数据结构】回溯算法、贪心算法、动态规划、图…

时域系统到频域响应的直观解析及数学推导

课本里经常有已知系统时域的差分方程&#xff0c;求系统的频率响应这样的题&#xff0c;老师会讲怎么带公式进去解决&#xff0c;怎么查表解决&#xff0c;但我们总时无法直观地理解这两种转换的特殊关联在哪里&#xff0c;这篇文章以FIR滤波器为例&#xff0c;不仅列出了课本里…

【Docker】免费使用的腾讯云容器镜像服务

需要云服务器等云产品来学习Linux可以移步/-->腾讯云<--/官网&#xff0c;轻量型云服务器低至112元/年&#xff0c;新用户首次下单享超低折扣。 目录 1、设置密码 2、登录实例&#xff08;sudo docker login xxxxxx&#xff09; 3、新建命名空间&#xff08;每个命名空…

高刷电竞显示器 - HKC VG253KM

今天给大家分享一款高刷电竞显示器 - HKC VG253KM。 高刷电竞显示器 - HKC VG253KM源于雄鹰展翅翱翔的设计灵感&#xff0c;严格遵循黄金分割比例的蓝色点晴线条&#xff0c;加上雾面工艺及高低起伏错落有致的线条处理&#xff0c;在VG253KM的背部勾勒出宛若大鹏展翅的鹰翼图腾…

Python实战:统计字符串中的英文字母、空格、数字及其他字符出现的个数

Python实战&#xff1a;统计字符串中的英文字母、空格、数字及其他字符出现的个数 &#x1f308; 个人主页&#xff1a;高斯小哥 &#x1f525; 高质量专栏&#xff1a;Matplotlib之旅&#xff1a;零基础精通数据可视化、Python基础【高质量合集】、PyTorch零基础入门教程 &…

个人博客系统测试

文章目录 一、项目介绍二、测试1. 功能测试2. 自动化测试&#xff08;1&#xff09;添加相关依赖&#xff08;2&#xff09;新建包并在报下创建测试类&#xff08;3&#xff09;亮点及难点 一、项目介绍 个人博客系统采用前后端分离的方法来实现&#xff0c;同时使用了数据库来…

windows11本地深度学习环境搭建Anacond,keras,tensorflow,pytorch, jupyter notebook

前言 工欲善其事&#xff0c;必先利其器。 第一步 安装Anaconda 下载地址&#xff1a; https://www.anaconda.com/download 路径默认 这里都勾选上 然后会卡在这里&#xff0c;卡很久&#xff0c;不用管&#xff0c;等着就行 第二步 配置环境 conda env list 列出所有…

Redis可视化工具——RedisInsight

文章目录 1. 下载2. 安装3. RedisInsight 添加 Redis 数据库4. RedisInsight 使用 RedisInsight 是 Redis 官方出品的可视化管理工具&#xff0c;支持 String、Hash、Set、List、JSON 等多种数据类型的管理&#xff0c;同时集成了 RedisCli&#xff0c;可进行终端交互。 1. 下载…

电子器件系列63:焊带(光伏焊带)

光伏焊带&#xff0c;又称涂锡焊带。光伏焊带是光伏组件的重要组成部分&#xff0c;属于电气连接部件&#xff0c;应用于光伏电池片的串联或并联&#xff0c;发挥导电聚电的重要作用&#xff0c;以提升光伏组件的输出电压和功率。光伏焊带是光伏组件焊接过程中的重要材料&#…

ShardingSphere 5.x 系列【15】分布式主键生成器

有道无术,术尚可求,有术无道,止于术。 本系列Spring Boot 版本 3.1.0 本系列ShardingSphere 版本 5.4.0 源码地址:https://gitee.com/pearl-organization/study-sharding-sphere-demo 文章目录 1. 概述2. 配置3. 内置算法3.1 UUID3.2 Snowflake3.3 NanoId3.4 CosId3.5 Co…

美客多如何批量注册买家账号?

美客多在南美电商领域可是个大佬。它的实力强大&#xff0c;影响力广泛&#xff0c;被大家尊称为南美电商巨头。它的业务范围覆盖了整个拉丁美洲&#xff0c;特别是一些重要的国家&#xff0c;比如墨西哥、阿根廷、玻利维亚、巴西、智利和哥伦比亚&#xff0c;这些地方都有它的…

【开源】SpringBoot框架开发婚恋交友网站

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 数据中心模块2.2 会员管理模块2.3 新闻管理模块2.4 相亲大会管理模块2.5 留言管理模块 三、系统设计3.1 用例设计3.2 数据库设计3.2.1 会员信息表3.2.2 新闻表3.2.3 相亲大会表3.2.4 留言表 四、系统展示五、核心代码5.…

cookie伪造 [BSidesCF 2019]Kookie1

打开题目 提示用admin用户登录 尝试弱口令发现&#xff0c;登录失败 显示用admin&passwordadmin!进行登录 有发现说cookie&#xff0c;就尝试用cookie登录&#xff1a; f12编辑添加cookie重发包: 或者bp抓包 Cookie:usernameadmin 用admin登录成功 得到flag: 参考文章&…

Nmap详解

Nmap(Network Mapper,网络映射器)是一款开放源代码的网络探测和安 全审核工具。它被设计用来快速扫描大型网络&#xff0c;包括主机探测与发现、开放的端口情 况、操作系统与应用服务指纹识别、WAF 识别及常见安全漏洞。它的图形化界面是 Zenmap, 分布式框架为DNmap。 Nm…

TensorFlow2.x 精选笔记(1)数据基本操作与线性代数

学习参考&#xff1a; 动手学深度学习2.0Deep-Learning-with-TensorFlow-bookpytorchlightning 一、数组与张量 虽然张量看起来是复杂的对象&#xff0c;但它们可以理解为向量和矩阵的集合。理解向量和矩阵对于理解张量至关重要。 向量是元素的一维列表&#xff0c;向量是一…

C++的vector容器->基本概念、构造函数、赋值操作、容量和大小、插入和删除、数据存取、互换容器、预留空间

#include<iostream> using namespace std; #include <vector> //vector容器构造 void printVector(vector<int>& v) { for (vector<int>::iterator it v.begin(); it ! v.end(); it) { cout << *it << " "…

【人脸朝向识别与分类预测】基于LVQ神经网络

课题名称&#xff1a;基于LVQ神经网络的人脸朝向识别分类 版本日期&#xff1a;2024-02-20 运行方式&#xff1a;直接运行GRNN0503.m文件 代码获取方式&#xff1a;私信博主或 企鹅号:491052175 模型描述&#xff1a; 采集到一组人脸朝向不同角度时的图像&#xff0c;图像…

Python urllib、requests、HTMLParser

HTTP协议 HTTP 协议&#xff1a;一般指HTTP(超文本传输)协议。 HTTP是为Web浏览器和Web服务器之间的通信而设计的&#xff0c;基于TCP/IP通信协议嘞传递数据。 HTTP消息结构 客户端请求消息 客户端发送一个HTTP请求到服务器的请求消息包括以下格式 请求行(request line)请求…

LINUX读取RTC实时时钟时间

linux 读写RTC时间_linux rtc 读写-CSDN博客

Java知识点一

hello&#xff0c;大家好&#xff01;我们今天开启Java语言的学习之路&#xff0c;与C语言的学习内容有些许异同&#xff0c;今天我们来简单了解一下Java的基础知识。 一、数据类型 分两种&#xff1a;基本数据类型 引用数据类型 &#xff08;1&#xff09;整型 八种基本数…