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

Vue3 中 Computed 用法

Computed 又被称作计算属性,用于动态的根据某个值或某些值的变化,来产生对应的变化,computed 具有缓存性,当无关值变化时,不会引起 computed 声明值的变化。 产生一个新的变量并挂载到 vue 实例上去。

vue3 中 的 computed 的使用,由于 vue3 兼容 vue2 的选项式 API,所以可以直接使用 vue2 的写法,以下是 vue3 中 computed 的写法和 vue2 中的写法的对比。

组合式 API 中使用 computed 时,需要先引入:import { computed } from "vue"。 引入之后 computed 可以传入的参数有两种: 回调函数和 options 。 具体使用

一、函数式写法

在 vue2 中,computed 写法:

computed:{  sum(){  return this.num1+ this.num2  } 
}

在 vue3 如果使用选项式 API 也可以这样写,主要看下组合式 API 的使用。

示例 1:求和

import { ref, computed }  from "vue"export default { setup(){  const num1 = ref(1)  const num2 = ref(1)  let sum = computed(()=>{  return num1.value + num2.value   }) }
}

调用 computed 时, 传入了一个箭头函数,返回值作为 sum 。相比之前,使用更加简单了。如果需要计算多个属性值,直接调用就可以。如:

let sum = computed(()=>{return num1.value + num2.value 
})
let mul = computed(()=>{  return num1.value * num2.value  
})

二、options 写法

计算属性默认只有 getter ,在需要的时候也可以提供 setter 。在 vue2 中用法如下:

computed:{ mul:{  get(){ // num1 值改变时触发    return this.num1 * 10   },  set(value){ // mul 值被改变时触发    this.num1 = value /10   }  } 
}

mul 属性是给 num1 放大 10,如果修改 mul 的值,则 num1 也随之改变。

在 vue3 中 :

let mul = computed({ get:()=>{   return num1.value *10 }, set:(value)=>{   num1.value = value/10 } 
})

这两种写法不太一样,仔细观察区别不大,get 和 set 调用也是一样的。

三、computed 传参

计算属性需要传入一个参数怎么写呢?

<template> <div>  <div v-for="(item,index) in arr" :key="index" @click="sltEle(index)">    {{item}}   </div></div>
</template>
<script>
import { ref, computed,reactive } from "vue"export default{ setup(){   const arr = reactive([    '哈哈','嘿嘿'   ])  const sltEle = computed( (index)=>{   console.log('index',index);   })  return{ arr,sltEle }} 
}
</script>

直接这样写,运行的时候,出现错误:Uncaught TypeError: $setup.sltEle is not a function。

原因:

computed 计算属性并没有给定返回值,我们调用的是一个函数,而 computed 内部返回的并不是一个函数,所以就会报错:sltEle is not a function。

解决办法:

需要在计算属性 内部返回一个函数。修改代码如下:

const sltEle = computed(()=>{ return function(index) {  console.log('index',index);} 
}

相关文章:

Vue3 中 Computed 用法

Computed 又被称作计算属性&#xff0c;用于动态的根据某个值或某些值的变化&#xff0c;来产生对应的变化&#xff0c;computed 具有缓存性&#xff0c;当无关值变化时&#xff0c;不会引起 computed 声明值的变化。 产生一个新的变量并挂载到 vue 实例上去。 vue3 中 的 com…...

常见的三种锁

一、互斥锁 互斥锁 Mutex 保证在任意时刻只有一个线程能够进入被保护的临界区。当一个线程获取到互斥锁后&#xff0c;其他线程若要进入临界区就会被阻塞&#xff0c;直到该线程释放锁。 互斥锁是一种阻塞锁&#xff0c;当线程无法获取到锁时&#xff0c;会进入阻塞状态。 应…...

离线文本转语音库pyttsx3(目前接触到的声音效果最好的,基本上拿来就能用)

在现代应用程序中&#xff0c;文本转语音&#xff08;Text-to-Speech, TTS&#xff09;技术越来越受到重视。无论是为视力障碍人士提供帮助&#xff0c;还是为教育和娱乐应用增添趣味&#xff0c;TTS 都能发挥重要作用。今天&#xff0c;我们将介绍一个简单易用的 Python 库——…...

LeetCode Hot100刷题——反转链表(迭代+递归)

206.反转链表 给你单链表的头节点 head &#xff0c;请你反转链表&#xff0c;并返回反转后的链表。 示例 1&#xff1a; 输入&#xff1a;head [1,2,3,4,5] 输出&#xff1a;[5,4,3,2,1]示例 2&#xff1a; 输入&#xff1a;head [1,2] 输出&#xff1a;[2,1]示例 3&#…...

JJJ:linux sysfs相关

文章目录 1.sysfs&#xff08;属性&#xff09;文件的创建、读、写1.1 创建流程1.2 open流程1.3 read流程 2.补充2.1 sysfs下常见目录介绍2.2 属性相关2.2.1 简介2.2.2 attribute文件的创建 2.3 sysfs目录如何创建的 1.sysfs&#xff08;属性&#xff09;文件的创建、读、写 1…...

Leetcode 刷题记录 06 —— 矩阵

本系列为笔者的 Leetcode 刷题记录&#xff0c;顺序为 Hot 100 题官方顺序&#xff0c;根据标签命名&#xff0c;记录笔者总结的做题思路&#xff0c;附部分代码解释和疑问解答。 目录 01 矩阵置零 方法一&#xff1a;标记数组 方法二&#xff1a;两个标记变量 02 螺旋矩阵…...

什么样的物联网框架适合开展共享自助KTV唱歌项目?

现在物联网的广泛应用&#xff0c;也让更多用户们看到了它的实力&#xff0c;也使得共享经济遍地开花。其中共享自助唱歌设备也备受欢迎&#xff0c;那么适合开展共享自助KTV唱歌项目的物联网框架都应具备哪些特点呢&#xff1f; 智能化与自动化管理 物联网技术在共享KTV中的应…...

【Academy】HTTP Host 标头攻击 ------ HTTP Host header attacks

HTTP Host 标头攻击 ------ HTTP Host header attacks 1. 什么是 HTTP Host 标头&#xff1f;2. 什么是 HTTP Host 标头攻击&#xff1f;3. HTTP Host 标头漏洞是如何产生的&#xff1f;4. 如何测试 HTTP Host 标头漏洞4.1 提供任意 Host 标头4.2 检查有缺陷的验证4.3 发送不明…...

Web基础:HTML快速入门

HTML基础语法 HTML&#xff08;超文本标记语言&#xff09; 是用于创建网页内容的 标记语言&#xff0c;通过定义页面的 结构和内容 来告诉浏览器如何呈现网页。 超文本&#xff08;Hypertext&#xff09; 是一种通过 链接&#xff08;Hyperlinks&#xff09; 将不同文本、图像…...

技术领域,有许多优秀的博客和网站

在技术领域&#xff0c;有许多优秀的博客和网站为开发者、工程师和技术爱好者提供了丰富的学习资源和行业动态。以下是一些常用的技术博客和网站&#xff0c;涵盖了编程、软件开发、数据科学、人工智能、网络安全等多个领域&#xff1a; 1. 综合技术博客 1.1 Medium 网址: ht…...

k8s概念及k8s集群部署(Centos7)

Centos7部署k8s集群 部署之前&#xff0c;先简单说下k8s是个啥&#xff1a; 一、k8s简介&#xff1a; k8s&#xff0c;全称&#xff1a;kubernetes&#xff0c;它可以看作是一个分布式系统支撑平台。k8s的作用&#xff1a; 1、故障自愈&#xff1a; k8s这个玩意可以监控容器…...

《DeepSeek-V3:动态温度调节算法,开启推理新境界!》

在人工智能领域不断探索的征程中&#xff0c;DeepSeek-V3以其卓越的创新技术&#xff0c;尤其是动态温度调节算法&#xff0c;成为了备受瞩目的焦点。这项算法犹如一把神奇的钥匙&#xff0c;巧妙地开启了推理速度与精度动态平衡的大门&#xff0c;为大语言模型的发展开辟了新的…...

Python从入门到精通1:FastAPI

引言 在现代 Web 开发中&#xff0c;API 是前后端分离架构的核心。FastAPI 凭借其高性能、简洁的语法和自动文档生成功能&#xff0c;成为 Python 开发者的首选框架。本文将从零开始&#xff0c;详细讲解 FastAPI 的核心概念、安装配置、路由设计、请求处理以及实际应用案例&a…...

fastapi+angular停车管理系统可跨域

说明&#xff1a; 我计划用fastapiangular做一款停车管理系统&#xff0c;支持跨域 1.设计mysql数据库表&#xff0c; 2.建表&#xff0c;添加测试数据&#xff0c;多表查询&#xff0c; 3.在fastapi写接口查询数据&#xff0c; 4.用postman测试&#xff0c; 5.在angular前端展…...

前端题目类型

HTMLCSS常见面试题 HTML标签有哪些行内元素 img、picture、span、input、textarea、select、label 说说你对元素语义化的理解 元素语义化就是用正确的元素做正确的事情。虽然理论上所有html元素都可通过css样式实现相同效果&#xff0c;但这样会使事情复杂化&#xff0c;所以需…...

openwrt路由系统------lua、uci的关系

1. Luci 的核心组成 (1) Lua 简介:Luci 的界面和逻辑几乎完全使用 Lua 脚本语言编写。Lua 是一种轻量级、高效的嵌入式脚本语言,适合在资源受限的路由器环境中运行。作用: 生成动态 Web 页面(与后端交互渲染 HTML)。处理用户提交的表单数据(如修改 Wi-Fi 密码)。调用系…...

Elastic:AI 会开始取代网络安全工作吗?

作者&#xff1a;来自 Elastic Joe DeFever 不会&#xff0c;但它正在从根本上改变这些工作。 生成式 AI (GenAI) 正迅速成为日常安全工作流程中的一个重要组成部分。那么&#xff0c;它是合作伙伴还是竞争对手&#xff1f; GenAI 技术在安全堆栈几乎每个方面的广泛应用&#…...

Linux安装升级docker

Linux 安装升级docker Linux 安装升级docker背景升级停止docker服务备份原docker数据目录移除旧版本docker安装docker ce恢复数据目录启动docker参考 安装找到docker官网找到docker文档删除旧版本docker配置docker yum源参考官网继续安装docker设置开机自启配置加速测试 Linux …...

【经验分享】Ubuntu20.04编译RK3568 AI模型报错问题(已解决)

【经验分享】Ubuntu20.04编译RK3568 AI模型报错问题&#xff08;已解决&#xff09; 前言问题现象问题分析解决方案总结 前言 这里使用的是Rockchip提供的rknn_model_zoo&#xff0c;https://github.com/airockchip/rknn_model_zoo/tree/main 此解决方案适用于Rockchip芯片在U…...

国产算力助力工业智能新范式

随着人工智能、智能制造以及边缘计算等技术趋势的发展&#xff0c;算力设备正逐渐从中心云向边缘机房乃至边缘现场下沉。在此背景下&#xff0c;以工控机为例的部署于各类边缘现场的算力设备市场&#xff0c;也正面临着新的变革。 根据IDC 2024研究报告显示&#xff1a;在能源制…...

C++的std--ranges中的优化异构

C的std::ranges中的优化异构&#xff1a;现代编程的效率革命 C20引入的std::ranges库彻底改变了算法和容器的交互方式&#xff0c;其中优化异构&#xff08;Heterogeneous Optimization&#xff09;技术尤为引人注目。传统算法在处理不同类型的数据时&#xff0c;往往需要显式…...

65R125-ASEMI超结MOS管TO-220封装

编辑&#xff1a;LL65R125-ASEMI超结MOS管TO-220封装型号&#xff1a;65R125品牌&#xff1a;ASEMI沟道&#xff1a;NPN封装&#xff1a;TO-220漏源电流&#xff1a;31A漏源电压&#xff1a;650VRDS(on):125mΩ批号&#xff1a;最新引脚数量&#xff1a;3封装尺寸&#xff1a;如…...

Verilog实战精要:从语法基础到高效状态机设计

1. Verilog语法基础&#xff1a;从硬件思维出发 第一次接触Verilog时&#xff0c;很多人会把它当成普通编程语言来学&#xff0c;结果发现处处碰壁。我当年在FPGA项目上栽的第一个跟头&#xff0c;就是把阻塞赋值用在了时钟触发的always块里&#xff0c;导致仿真结果和实际硬件…...

告别C盘爆炸!手把手教你将Dify+Docker数据盘迁移到D盘(附.ENV配置详解)

告别C盘爆炸&#xff01;手把手教你将DifyDocker数据盘迁移到D盘&#xff08;附.ENV配置详解&#xff09; Windows系统盘空间告急是许多开发者的共同烦恼&#xff0c;尤其是当你开始使用Docker部署AI开发环境时。C盘空间像被黑洞吞噬一样迅速消失&#xff0c;系统运行速度也随之…...

全桥LLC变换器死区时间优化实战:从IGBT硬开通到完美ZVS的调试记录

全桥LLC变换器死区时间优化实战&#xff1a;从IGBT硬开通到完美ZVS的调试记录 在电力电子领域&#xff0c;LLC谐振变换器因其高效率、高功率密度和良好的EMI特性&#xff0c;已成为中高功率应用的理想选择。然而&#xff0c;实际调试过程中&#xff0c;死区时间与励磁电感的匹配…...

Simulink频域分析避坑指南:如何准确获取谐振频率(含MATLAB代码)

Simulink频域分析实战&#xff1a;谐振频率精准提取方法论与MATLAB实现 在控制系统设计与分析领域&#xff0c;频域特性是评估系统动态性能的核心指标之一。而谐振频率作为频域响应中的关键特征点&#xff0c;直接影响着系统的稳定性和响应速度。然而&#xff0c;许多工程师在使…...

EPLAN默认工具栏隐藏功能大揭秘:从复制格式到表格式编辑的实战技巧

EPLAN默认工具栏隐藏功能大揭秘&#xff1a;从复制格式到表格式编辑的实战技巧 在电气设计领域&#xff0c;EPLAN作为行业标杆软件&#xff0c;其默认工具栏中隐藏着许多未被充分发掘的效率利器。这些功能往往被常规操作所掩盖&#xff0c;却能在复杂项目设计中节省大量时间。…...

RWKV7-1.5B-g1a多语言生成能力展示:中英日韩混合提示词真实输出效果对比

RWKV7-1.5B-g1a多语言生成能力展示&#xff1a;中英日韩混合提示词真实输出效果对比 1. 模型简介与核心能力 rwkv7-1.5B-g1a是基于新一代RWKV-7架构开发的多语言文本生成模型&#xff0c;特别优化了中英日韩四种语言的混合处理能力。这个1.5B参数的版本在保持轻量化的同时&am…...

OpenClaw语音交互方案:Qwen3-32B镜像对接Whisper实时转写

OpenClaw语音交互方案&#xff1a;Qwen3-32B镜像对接Whisper实时转写 1. 为什么需要语音交互方案 作为一个长期与命令行打交道的开发者&#xff0c;我始终在寻找更自然的交互方式。键盘输入固然高效&#xff0c;但在某些场景下——比如双手被占用时调试代码、厨房里边做饭边查…...

tmux快速上手指南:3个核心命令与1个关键快捷键解析

1. 为什么你需要tmux&#xff1f; 如果你经常在服务器上工作&#xff0c;肯定遇到过这样的场景&#xff1a;正在跑一个耗时很长的任务&#xff0c;突然网络波动导致SSH连接断开&#xff0c;所有进程都被终止&#xff0c;几个小时的成果瞬间消失。这种时候&#xff0c;tmux就是你…...