vue3-计算属性

计算属性

模板中的表达式虽然方便,但也只能用来做简单的操作。如果在模板中写太多逻辑,会让模板变得臃肿,难以维护。

  • 根据作者今年是否看过书展示不同信息

<script lang="ts" setup>
import { ref, reactive } from "vue"

const author = reactive({
    name: 'John Doe',
    books: [
        '老人与海',
        '百年孤独',
        '丧钟为谁而鸣'
    ]
})

</script>

<template>
    <div class="container">
        <p>2024是否有看过书籍:</p>
        <span>{{ author.books.length > 0 ? 'Yes' : 'No' }}</span>
    </div>
</template>

<style lang="scss" scoped>
.container {}
</style>

效果:

  • 这样判断使模版逻辑看起来比较复杂

因此我们推荐使用计算属性来描述依赖响应式状态的复杂逻辑

<script lang="ts" setup>
import { ref, reactive, computed } from "vue"

const author = reactive({
    name: 'John Doe',
    books: [
        '老人与海',
        '百年孤独',
        '丧钟为谁而鸣'
    ]
})

const publishedBooksMessage = computed(() => {
    return author.books.length > 0 ? 'Yes' : 'No'
})

</script>

<template>
    <div class="container">
        <p>2024是否有看过书籍:</p>
        <span>{{ publishedBooksMessage }}</span>
    </div>
</template>

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

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

计算属性缓存 vs 方法

  • 使用方法实现上述功能

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

  ...
  ...
  
  <p>{{ calculateBooksMessage() }}</p>
  
  ...
  ...
  

区别:

  1. 计算属性值会基于其响应式依赖被缓存,一个计算属性仅会在其响应式依赖更新时才重新计算。这意味着只要 author.books 不改变,无论多少次访问 publishedBooksMessage 都会立即返回先前的计算结果,而不用重复执行 getter 函数。

  2. 方法调用总是会在重渲染发生时再次执行函数

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

可写计算属性

  • 计算属性默认是只读的。

  • 当你尝试修改一个计算属性时,你会收到一个运行时警告。

  • 只在某些特殊场景中你可能才需要用到“可写”的属性,你可以通过同时提供 getter 和 setter 来创建:

<script setup lang="ts">
import { ref, computed } from 'vue'

const firstName = ref('张')
const lastName = ref('三')

const fullName = computed({
    // getter
    get() {
        return firstName.value + ' ' + lastName.value
    },
    // setter
    set(newValue) {
        // 注意:我们这里使用的是解构赋值语法
        [firstName.value, lastName.value] = newValue.split(' ')
    }
})

// 赋值后会执行 计算属性的 setter 方法 从而改变 firstName 和 lastName 的值
const changeName = () => {
    // 不推荐这么做 避免直接修改计算属性值 
    fullName.value = '张 四'
    // 推荐 应该更新它所依赖的源状态以触发新的计算
    // lastName.value = '四'
}

</script>

<template>
    <div class="container">
        <button class="button" @click="changeName">点击改名名字</button>
        <p>{{ fullName }}</p>
    </div>
</template>

<style lang="scss" scoped>
.container {}
</style>
  • 现在当你再运行 fullName.value = '张 四' 时,setter 会被调用而 firstName 和 lastName 会随之更新。

注意:这里是做演示并不推荐计算属性修改,除非特殊需要

解构赋值语法是一种 Javascript 表达式。可以将数组中的值或对象的属性取出,赋值给其他变量。

let a, b, rest;
[a, b] = [10, 20];

console.log(a);
// 输出: 10

console.log(b);
// 输出: 20

//... 扩展运算符 
// 将剩余的值 赋值给rest变量 就这个意思
// 函数上使用就是多参数 比如 function f1(...args)
[a, b, ...rest] = [10, 20, 30, 40, 50];

console.log(rest);
// 输出: Array [30, 40, 50]

最佳实践

  1. Getter 不应有副作用

  • 计算属性的 getter 应只做计算而没有任何其他的副作用,这一点非常重要,请务必牢记。

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

  1. 避免直接修改计算属性值

  • 从计算属性返回的值是派生状态。可以把它看作是一个“临时快照”,每当源状态发生变化时,就会创建一个新的快照。

  • 更改快照是没有意义的,因此计算属性的返回值应该被视为只读的,并且永远不应该被更改——应该更新它所依赖的源状态以触发新的计算。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

C++11 14 17内存管理

智能指针 unique_ptr 初始化 访问和移动赋值 重置和移动内存资源 自定义删除器 shared_ptr 原理 自定义删除器 分配器allocator和new重载 new表达式原理 operator new delete placement new new (buf) 是一种 "placement new" 的使用方式&#xff0c;它允许在已…

thinkphp学习06-连接数据库与模型初探

新建数据库 CREATE DATABASE tp6stu01 CHARACTER SET utf8mb4 COLLATE utf8mb4_bin;创建表和数据 DROP TABLE IF EXISTS tp_user; CREATE TABLE tp_user (id mediumint(8) UNSIGNED NOT NULL AUTO_INCREMENT COMMENT 自动编号,username varchar(20) CHARACTER SET utf8 COLL…

绘制几何图形(Shape)

目录 1、创建绘制组件 2、形状视口viewport 3、自定义样式 4、场景示例 绘制组件用于在页面绘制图形&#xff0c;Shape组件是绘制组件的父组件&#xff0c;父组件中会描述所有绘制组件均支持的通用属性。具体用法请参考Shape。 1、创建绘制组件 绘制组件可以由以下两种形式…

Spring MVC的RequestMapping注解、controller方法返回值

1.使用说明 作用&#xff1a;用于建立请求URL和处理请求方法之间的对应关系。 出现位置&#xff1a; 类上&#xff1a; 请求 URL的第一级访问目录。此处不写的话&#xff0c;就相当于应用的根目录。写的话需要以/开头。它出现的目的是为了使我们的 URL 可以按照模块化管理&…

Netty开篇——NIO章上(三)

Java NIO基本介绍 java non-blocking I/O 称为NIO(也叫New IO)。JDK4开始提供,同步非阻塞相关内容在 java.nio 包及子包下&#xff0c;对java.io 包中的很多类进行改写。三大核心: Channel(通道)&#xff0c;Buffer(缓冲区),Selector(选择器)NIO是面向缓冲区或者面向块编程的。…

企业网站建设中常用的英文翻译

下面好代码网在长期的网站建设业务中总结的&#xff0c;一些在企业网站建设中词语的常用翻译&#xff0c;可以让你的企业网站更具有专业性。如果你做中英文双语版本网站或者外贸网站的请收藏备用。 网站导航 site map 公司简介 PROFILE or COMPANY Profile or Company 综述 Gen…

Java文件自动生成文档

说明 此文章根据Gemini Pro 生成资料整理。 生成文档 javadoc -d mydoc -author -version HelloWorld.java javadoc -d mydoc -author -version HelloWorld.java 命令用于生成 Java 源文件的javadoc文档&#xff0c;并将javadoc文档输出到 mydoc 目录中。 javadoc&#xf…

【SQL注入】SQLMAP v1.7.11.1 汉化版

下载链接 【SQL注入】SQLMAP v1.7.11.1 汉化版 简介 SQLMAP是一款开源的自动化SQL注入工具&#xff0c;用于扫描和利用Web应用程序中的SQL注入漏洞。它在安全测试领域被广泛应用&#xff0c;可用于检测和利用SQL注入漏洞&#xff0c;以验证应用程序的安全性。 SQL注入是一种…

【服务器数据恢复】Hyper-V虚拟化数据恢复案例

服务器数据恢复环境&#xff1a; Windows Server操作系统服务器&#xff0c;部署Hyper-V虚拟化环境&#xff0c;虚拟机的硬盘文件和配置文件存放在某品牌MD3200存储中&#xff0c;MD3200存储中有一组由4块硬盘组成的raid5阵列&#xff0c;存放虚拟机的数据文件&#xff1b;另外…

C++11 左右值引用、移动语义

右值引用和移动语义 什么是左值&#xff1f;什么是左值引用&#xff1f; 左值是一个表示数据的表达式(如变量名或解引用的指针)&#xff0c;我们可以获取它的地址可以对它赋值&#xff0c;左值可以出现赋值符号的左边&#xff0c;右值不能出现在赋值符号左边。定义时const修饰…

Oracle数据库 CentOS7上修改hostname后无法启动解决办法

目录 一、问题背景 二、解决问题 三、重启数据库 四、重启监听 一、问题背景 CentOS系统需要修改hostname&#xff0c;修改后oracle数据库无法启动和正常运行。 系统&#xff1a;CentOS7.3 数据库版本&#xff1a;Oracle 11g Express Edtion 二、解决问题 通过which orac…

迈入AI智能时代!ChatGPT国内版免费AI助手工具 peropure·AI正式上线 一个想法写一首歌?这事AI还真能干!

号外&#xff01;前几天推荐的Peropure.Ai迎来升级&#xff0c;现已支持联网模式&#xff0c;回答更新更准&#xff0c;欢迎注册体验&#xff1a; https://sourl.cn/5T74Hu 相信很多人都有过这样的想法&#xff0c;有没有一首歌能表达自己此时此刻的心情&#xff1a; 当你在深…

线性代数——行列式相关性质

目录 一、行列式与它的转置列行列式相等 二、对换行列式的两行&#xff08;列&#xff09;&#xff0c;行列式变号 三、行列式某行&#xff08;列&#xff09;有公因子k&#xff0c;则k可以提到行列式外 四、行列式中若两行成比例&#xff0c;则行列式为0 五、行列式的某一行…

使用numpy处理图片——分离通道

大纲 读入图片分离通道堆叠法复制修改法 生成图片 在《使用numpy处理图片——滤镜》中&#xff0c;我们剥离了RGB中的一个颜色&#xff0c;达到一种滤镜的效果。 如果我们只保留一种元素&#xff0c;就可以做到PS中分离通道的效果。 读入图片 import numpy as np import PIL.…

整合junit与热部署

整合junit <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-test</artifactId><version>2.7.0</version></dependency> 测试类上添加SpringBootTest 如&#xff1a; 注意测试类的…

NeRF算法模型简析:从理论到实践的轻度解析以及如何编辑和微调

nerf模型可编辑的&#xff1f; NeRF模型的可编辑性&#xff08;editability&#xff09;指的是能够修改预训练的NeRF模型以改变其生成的场景或对象的某些特征&#xff0c;而不是从头开始重新训练模型。这种编辑可以是改变颜色、形状、纹理或者添加、移除和修改场景中的对象。 在…

【复现】网康科技-防火墙存在RCE漏洞_17

目录 一.概述 二 .漏洞影响 三.漏洞复现 1. 漏洞一&#xff1a; 四.修复建议&#xff1a; 五. 搜索语法&#xff1a; 六.免责声明 一.概述 网康下一代防火墙(NGFW)是一款可以全面应对应用层威胁的高性能防火墙。通过深入洞察网络流量中的用户、应用和内容&#xff0c;并…

yolov7中断训练后继续训练

1、训练指令 &#xff08;1&#xff09;添加resume参数&#xff0c;参数值改为true &#xff08;2&#xff09;weights参数&#xff0c;参数值改为中断前上次训练权重 中断后继续训练命令&#xff1a; python.exe train.py --weights runs/train/exp9/weights/last.pt --re…

【MATLAB源码-第109期】基于matlab的哈里斯鹰优化算发(HHO)机器人栅格路径规划,输出做短路径图和适应度曲线。

操作环境&#xff1a; MATLAB 2022a 1、算法描述 哈里斯鹰优化算法&#xff08;Harris Hawk Optimization, HHO&#xff09;是一种受自然界捕食行为启发的优化算法。它基于哈里斯鹰的捕猎策略和行为模式&#xff0c;主要用于解决各种复杂的优化问题。这个算法的核心特征在于…

怎么将文件批量重命名为不同名称?

怎么将文件批量重命名为不同名称&#xff1f;有许多情况下可以考虑对文件进行批量重命名为不同名称&#xff0c;文件分类和整理&#xff1a;当您需要对一组文件进行分类、整理或重新组织时&#xff0c;可以考虑将它们批量重命名为不同的名称。这有助于更好地组织文件并使其更易…