vue2 和 vue3 中 computer 计算属性的用法
Vue 2 中的 computed
在 Vue 2 中,计算属性是响应式的,并且基于 getter 进行缓存,只有依赖的响应式数据发生变化时才会重新计算。
基本用法
<template><div><p>原始消息:{{ message }}</p><p>反转消息:{{ reversedMessage }}</p></div>
</template><script>
export default {data() {return {message: "Hello Vue!"};},computed: {// 计算属性reversedMessage() {return this.message.split("").reverse().join("");}}
};
</script>
特点:
- 计算属性
reversedMessage依赖于message,当message发生变化时,它会自动重新计算。 computed具有缓存功能,只有在依赖的属性变更时才会重新计算,而不像methods每次调用都会执行。
计算属性的 Getter 和 Setter
计算属性默认只有 getter,但也可以定义 setter。
<script>
export default {data() {return {firstName: "John",lastName: "Doe"};},computed: {fullName: {get() {return this.firstName + " " + this.lastName;},set(newValue) {const names = newValue.split(" ");this.firstName = names[0];this.lastName = names[1] || "";}}}
};
</script>
特点:
- 当读取
fullName时,会调用getter返回拼接后的字符串。 - 当修改
fullName时(例如this.fullName = "Alice Smith"),会触发setter并更新firstName和lastName。
Vue 3 中的 computed
在 Vue 3 中,除了 Options API 仍然可以使用 computed,Composition API 也提供了新的 computed 方法(从 vue 导入)。
Vue 3 Options API 用法(与 Vue 2 相同)
Vue 3 仍然支持 Vue 2 的 computed 写法:
<script>
export default {data() {return {message: "Hello Vue 3!"};},computed: {reversedMessage() {return this.message.split("").reverse().join("");}}
};
</script>
Vue 3 Composition API 用法
Vue 3 允许使用 computed 来创建计算属性,而不是定义在 computed 选项中。
基本用法
<template><div><p>原始消息:{{ message }}</p><p>反转消息:{{ reversedMessage }}</p></div>
</template><script>
import { ref, computed } from "vue";export default {setup() {const message = ref("Hello Vue 3!");const reversedMessage = computed(() => {return message.value.split("").reverse().join("");});return { message, reversedMessage };}
};
</script>
特点:
message使用ref进行响应式声明。computed(() => {})用于创建计算属性,返回的值是一个ref,必须用.value访问其内部值。
计算属性的 Getter 和 Setter
Vue 3 的 computed 也支持 getter 和 setter,类似于 Vue 2:
<script>
import { ref, computed } from "vue";export default {setup() {const firstName = ref("John");const lastName = ref("Doe");const fullName = computed({get: () => `${firstName.value} ${lastName.value}`,set: (newValue) => {const names = newValue.split(" ");firstName.value = names[0];lastName.value = names[1] || "";}});return { firstName, lastName, fullName };}
};
</script>
特点:
computed传入对象,定义get和set方法。set方法允许修改computed值,并影响ref定义的firstName和lastName。
Vue 2 vs Vue 3 computed 对比
| 特性 | Vue 2 | Vue 3 |
|---|---|---|
| 语法 | computed: { ... } | computed(() => {}) |
| 依赖响应式 | this.data | ref() 或 reactive() |
| Getter/Setter | computed: { get() {}, set() {} } | computed({ get() {}, set() {} }) |
需要 this | 需要 this | 无需 this |
| Composition API | ❌ | ✅ |
总结
- Vue 2 的
computed定义在computed选项中,必须依赖this访问data。 - Vue 3
Options API仍然支持 Vue 2 语法,但 Vue 3 主要推荐使用 Composition API。 - Vue 3
Composition API提供computed方法,使用ref或reactive作为依赖,不需要this,更灵活可组合。 - 计算属性支持
getter和setter,可以用来双向绑定数据。
Vue 3 的 Composition API 让 computed 变得更简洁、模块化,特别适用于组合逻辑复杂的应用场景。
相关文章:
vue2 和 vue3 中 computer 计算属性的用法
Vue 2 中的 computed 在 Vue 2 中,计算属性是响应式的,并且基于 getter 进行缓存,只有依赖的响应式数据发生变化时才会重新计算。 基本用法 <template><div><p>原始消息:{{ message }}</p><p>反…...
【STM32学习】标准库实现STM32 ADC采集1路、2路、多路
目录 ADC采集 ADC配置步骤 STM32F103C8T6的ADC 输入通道 编辑 1路ADC(A4 ADC 通道4) 1路ADC源码代码链接: 2路ADC(A4 ADC 通道4、A5 ADC 通道5)基于DMA实现 多路ADC实现采集 ADC采集 ADC配置步骤 使能GPIO…...
【STM32】外部时钟|红外反射光电开关
1.外部时钟 单片机如何对外部触发进行计数?先看一下内部时钟,内部时钟是接在APB1和APB2时钟线上的,APB1,APB2来自stm32单片机内部的脉冲信号,也叫内部时钟。我们用来定时。同样我们可以把外部的信号接入单片机,来对其…...
【语音科学计算器】当前汇率
JSON_MARKER_HORN{“base”:“USD”,“rates”:{“EUR”:0.9758,“JPY”:157.68,“GBP”:0.8190,“CNY”:7.3327,“HKD”:7.7872,“AUD”:1.6260,“CAD”:1.4422,“CHF”:0.9157,“SGD”:1.3714,“KRW”:1473.05,“NZD”:1.7992,“THB”:34.54,“MYR”:4.4930,“PHP”:57.32,“…...
PHP post 数据丢失问题
max_input_vars是PHP配置选项之一,用于设置一个请求中允许的最大输入变量数。它指定了在处理POST请求或者通过URL传递的参数时,PHP脚本能够接收和处理的最大变量数量。 max_input_vars的默认值是1000,意味着一个请求中最多可以包含1000个输入…...
【云服务器】云服务器内存不够用,开启SWAP交换分区
交换分区(Swap) 1.创建 2GB Swap 文件 sudo fallocate -l 2G /swapfile (如果 fallocate 不支持,可以用 dd 命令) sudo dd if/dev/zero of/swapfile bs1M count2048 2.设置 Swap 权限 sudo chmod 600 /swapfile…...
未来SLAM的研究方向和热点
SLAM(Simultaneous Localization and Mapping)是同时定位与地图构建的缩写,指的是机器人或设备在一个未知环境中一边进行自我定位,一边构建出环境的地图。SLAM广泛应用于机器人、自动驾驶、无人机等领域,涉及多个研究方…...
Orange 单体架构 - 快速启动
1 后端服务 1.1 基础设施 组件说明版本MySQLMySQL数据库服务5.7/8JavaJava17redis-stackRedis向量数据库最新版本Node安装Node22.11.0 1.2 orange-dependencies-parent 项目Maven依赖版本管理 1.2.1 项目克隆 GitHub git clone https://github.com/hengzq/orange-depende…...
【SQL】多表查询案例
📢本章节主要学习使用SQL多表查询的案例,多表查询基础概念 请点击此处。 🎄数据准备 首先我们创建一个新的表也就是薪资等级表,其余两个表(员工表和薪资表)在多表查询章节中已经创建。然后我么根据这三个表完成下面的12个需求。 create tab…...
springboot系列十四: 注入Servlet, Filter, Listener + 内置Tomcat配置和切换 + 数据库操作
文章目录 注入Servlet, Filter, Listener官方文档基本介绍使用注解方式注入使用RegistrationBean方法注入DispatcherServlet详解 内置Tomcat配置和切换基本介绍内置Tomcat配置通过application.yml完成配置通过类配置 切换Undertow 数据库操作 JdbcHikariDataSource需求分析应用…...
力扣-贪心-53 最大子数组和
思路 先把每一个值都加到当前集合中,记录当前的和,直到当前记录和小于0了,再重置改记录,再次尝试累加 代码 class Solution { public:int maxSubArray(vector<int>& nums) {int res INT32_MIN;int curSum 0;for(in…...
吃一堑长一智
工作中经历,有感触记录下 故事一 以前在一家公司时,自己是一名开发人员,遇到问题请教领导解决方案,当时领导给了建议,后来上线后出问题了,背了锅。心里想的是领导说这样做的呀,为什么出问题还…...
aws(学习笔记第二十九课) aws cloudfront hands on
aws(学习笔记第二十九课) 使用aws cloudfront 学习内容: 什么是aws cloudfront练习使用aws cloudfront 1. 什么是aws cloudfront aws cloudfront的整体架构 这里可以看出,aws引入了edge location的概念,用户的client与edge location进行是…...
deepseek自动化代码生成
使用流程 效果第一步:注册生成各种大模型的API第二步:注册成功后生成API第三步:下载vscode在vscode中下载agent,这里推荐使用cline 第四步:安装完成后,设置模型信息第一步选择API provider: Ope…...
【C++八股】内存对⻬
内存对齐是指编译器按照特定规则安排数据在内存中的存储位置,以提高程序的执行效率和可移植性。 内存对齐的原因: 1. 性能优化: 现代处理器通常要求数据在内存中按照特定的边界对齐,以提高内存访问效率。 如果数据未对齐&#x…...
idea连接gitee后.反向创建仓库和分支
文章目录 自动关联你登录的账号填写你的仓库和分支完成后会在gitee上创建一个仓库 (使用idea远程兼容gitee并反向创建仓库和分支) 自动关联你登录的账号 填写你的仓库和分支 完成后会在gitee上创建一个仓库...
汽车自动驾驶辅助L2++是什么?
自动驾驶辅助级别有哪些? 依照SAE(SAE International,Society of Automotive Engineers国际自动机工程师学会)的标准,大致划分为6级(L0-L5): L0人工驾驶:即没有驾驶辅助…...
围棋打谱应用软件设计制作
围棋打谱应用软件设计制作 五子棋游戏是大家耳熟能详的游戏,深受大众喜爱。可见其在智能游戏中的地位。我在本站发了好几篇文章介绍编制方法和算法。而类似的围棋游戏则是智能游戏的顶级存在。今在此基础上编制一款围棋打谱软件。当然这是简单的游戏程序࿰…...
论文笔记-WSDM2025-ColdLLM
论文笔记-WSDM2025-Large Language Model Simulator for Cold-Start Recommendation ColdLLM:用于冷启动推荐的大语言模型模拟器摘要1.引言2.前言3.方法3.1整体框架3.1.1行为模拟3.1.2嵌入优化 3.2耦合漏斗ColdLLM3.2.1过滤模拟3.2.2精炼模拟 3.3模拟器训练3.3.1LLM…...
线代[8]|北大丘维声教授《怎样学习线性代数?》(红色字体为博主注释)
文章目录 说明一、线性代数的内容简介二、学习线性代数的用处三、线性代数的特点四、学习线性代数的方法五、更新时间记录 说明 文章中红色字体为博主敲录完丘教授这篇文章后所加,刷到这篇文章的读者在首次阅读应当跳过红色字体,先通读一读文章全文&…...
网络编程(Modbus进阶)
思维导图 Modbus RTU(先学一点理论) 概念 Modbus RTU 是工业自动化领域 最广泛应用的串行通信协议,由 Modicon 公司(现施耐德电气)于 1979 年推出。它以 高效率、强健性、易实现的特点成为工业控制系统的通信标准。 包…...
使用docker在3台服务器上搭建基于redis 6.x的一主两从三台均是哨兵模式
一、环境及版本说明 如果服务器已经安装了docker,则忽略此步骤,如果没有安装,则可以按照一下方式安装: 1. 在线安装(有互联网环境): 请看我这篇文章 传送阵>> 点我查看 2. 离线安装(内网环境):请看我这篇文章 传送阵>> 点我查看 说明:假设每台服务器已…...
Docker 运行 Kafka 带 SASL 认证教程
Docker 运行 Kafka 带 SASL 认证教程 Docker 运行 Kafka 带 SASL 认证教程一、说明二、环境准备三、编写 Docker Compose 和 jaas文件docker-compose.yml代码说明:server_jaas.conf 四、启动服务五、验证服务六、连接kafka服务七、总结 Docker 运行 Kafka 带 SASL 认…...
STM32标准库-DMA直接存储器存取
文章目录 一、DMA1.1简介1.2存储器映像1.3DMA框图1.4DMA基本结构1.5DMA请求1.6数据宽度与对齐1.7数据转运DMA1.8ADC扫描模式DMA 二、数据转运DMA2.1接线图2.2代码2.3相关API 一、DMA 1.1简介 DMA(Direct Memory Access)直接存储器存取 DMA可以提供外设…...
测试markdown--肇兴
day1: 1、去程:7:04 --11:32高铁 高铁右转上售票大厅2楼,穿过候车厅下一楼,上大巴车 ¥10/人 **2、到达:**12点多到达寨子,买门票,美团/抖音:¥78人 3、中饭&a…...
剑指offer20_链表中环的入口节点
链表中环的入口节点 给定一个链表,若其中包含环,则输出环的入口节点。 若其中不包含环,则输出null。 数据范围 节点 val 值取值范围 [ 1 , 1000 ] [1,1000] [1,1000]。 节点 val 值各不相同。 链表长度 [ 0 , 500 ] [0,500] [0,500]。 …...
linux 错误码总结
1,错误码的概念与作用 在Linux系统中,错误码是系统调用或库函数在执行失败时返回的特定数值,用于指示具体的错误类型。这些错误码通过全局变量errno来存储和传递,errno由操作系统维护,保存最近一次发生的错误信息。值得注意的是,errno的值在每次系统调用或函数调用失败时…...
selenium学习实战【Python爬虫】
selenium学习实战【Python爬虫】 文章目录 selenium学习实战【Python爬虫】一、声明二、学习目标三、安装依赖3.1 安装selenium库3.2 安装浏览器驱动3.2.1 查看Edge版本3.2.2 驱动安装 四、代码讲解4.1 配置浏览器4.2 加载更多4.3 寻找内容4.4 完整代码 五、报告文件爬取5.1 提…...
安卓基础(aar)
重新设置java21的环境,临时设置 $env:JAVA_HOME "D:\Android Studio\jbr" 查看当前环境变量 JAVA_HOME 的值 echo $env:JAVA_HOME 构建ARR文件 ./gradlew :private-lib:assembleRelease 目录是这样的: MyApp/ ├── app/ …...
中医有效性探讨
文章目录 西医是如何发展到以生物化学为药理基础的现代医学?传统医学奠基期(远古 - 17 世纪)近代医学转型期(17 世纪 - 19 世纪末)现代医学成熟期(20世纪至今) 中医的源远流长和一脉相承远古至…...
