VUE3入门很简单(2)--- 计算属性

前言

重要提示:文章只适合初学者,不适合专家!!!

为什么需要计算属性?

想象你在开发一个购物车功能。当用户选择商品时,你需要:

  1. 计算商品总价
  2. 根据折扣码调整价格
  3. 自动更新免运费状态
  4. 显示税费金额

你会怎么做?在模板中写表达式?

<!-- 反例:模板中复杂逻辑 -->
<p>总价:¥{{ (items.reduce((sum, item) => sum + item.price * item.quantity, 0) * (1 - discountRate)) }}
</p>
<p v-if="(items.reduce((sum, item) => sum + item.price * item.quantity, 0) * (1 - discountRate)) > 100">已免运费
</p>

这种写法存在三个严重问题:

  1. 重复代码:相同逻辑在多个地方重复
  2. 难以维护:业务逻辑分散在模板中
  3. 性能浪费:每次渲染都重新计算

这就是计算属性的用武之地!

计算属性是什么?

计算属性是Vue的智能数据处理器:

  • 它能根据其他响应式数据自动计算新值
  • 会缓存计算结果,避免重复计算
  • 在模板中使用像普通属性一样简单
  • 代码集中管理,易于维护

计算属性使用五步法

第一步:从vue引入computed

// 1. 必须先从vue中引入computed
import { ref, computed } from 'vue'

第二步:定义响应式数据

// 2. 创建响应式基础数据
const price = ref(100)  // 商品单价
const quantity = ref(2) // 购买数量

第三步:创建计算属性

// 3. 使用computed()函数创建计算属性
const subtotal = computed(() => {// 简单的计算逻辑:单价 × 数量return price.value * quantity.value
})

第四步:创建更复杂的计算属性

// 4. 可创建依赖其他计算属性的计算属性
const discountRate = ref(0.2) // 折扣率20%const total = computed(() => {// 打折后金额:小计 × (1 - 折扣率)return subtotal.value * (1 - discountRate.value)
})

第五步:在模板中使用

<template><div class="cart"><!-- 直接像普通数据一样使用计算属性 --><p>单价: ¥{{ price }}</p><p>数量: {{ quantity }}</p><p>小计: ¥{{ subtotal }}</p><p>折扣率: {{ discountRate * 100 }}%</p><!-- 使用计算结果自动更新 --><p class="total">实付: ¥{{ total }}</p></div>
</template>

使用计算属性的改进方案

<script setup>
import { reactive, computed } from 'vue'const cart = reactive({items: [{ id: 1, name: 'Vue教程', price: 99, quantity: 2 },{ id: 2, name: 'React手册', price: 89, quantity: 1 }],discountRate: 0.1 // 10%折扣
})// 1. 计算总价(未打折)
const subtotal = computed(() => {return cart.items.reduce((sum, item) => sum + item.price * item.quantity, 0)
})// 2. 计算最终价格(打折后)
const total = computed(() => {return subtotal.value * (1 - cart.discountRate)
})// 3. 判断是否免运费
const freeShipping = computed(() => {return total.value > 100
})// 4. 计算税费(复杂规则)
const tax = computed(() => {if (freeShipping.value) {return total.value * 0.08 // 免运费税率8%}return total.value * 0.1 // 普通税率10%
})
</script><template><div><p>商品小计:¥{{ subtotal }}</p><p>折扣后价格:¥{{ total }}</p><p v-if="freeShipping">🎉 已免运费!</p><p>税费:¥{{ tax }}</p></div>
</template>

计算属性的优势

1. 自动依赖追踪与缓存

const a = ref(10)
const b = ref(20)// 每次访问都会执行计算
function regularSum() {console.log('函数执行')return a.value + b.value
}// 只有依赖变更时才重新计算
const computedSum = computed(() => {console.log('计算属性执行')return a.value + b.value
})

测试结果:

console.log(computedSum.value) // "计算属性执行" → 30
console.log(computedSum.value) // 无打印 → 从缓存返回30a.value = 15 // 更新依赖console.log(computedSum.value) // "计算属性执行" → 35
console.log(computedSum.value) // 无打印 → 从缓存返回35

2. 复杂逻辑封装

// 封装复杂的产品过滤逻辑
const filteredProducts = computed(() => {return products.value.filter(p => p.stock > 0) // 过滤有库存的.filter(p => p.price <= maxPrice.value) // 价格筛选.sort((a, b) => { // 排序if (sortBy.value === 'price') {return a.price - b.price}return a.name.localeCompare(b.name)})
})

常见问题与解决方案

问题1:计算属性不更新

原因:依赖项没有正确响应式

const obj = { count: 0 }// ❌ 错误 - 原始对象不是响应式
const doubled = computed(() => obj.count * 2) // ✅ 正确 - 使用reactive包装
const reactiveObj = reactive({ count: 0 })
const doubled = computed(() => reactiveObj.count * 2)

问题2:何时使用计算属性 vs 方法

场景选择原因
依赖响应式数据的计算计算属性自动缓存优化性能
数据转换或格式化计算属性更清晰的模板语法
需要参数的运算方法计算属性不接受参数
事件处理方法与事件配合使用
一次性的复杂运算方法避免不必要的响应式依赖

总结:何时使用计算属性?

在以下场景优先选择计算属性:

  1. 数据依赖计算:当需要基于其他响应式数据计算新值
  2. 模板格式化:需要格式化显示的数据
  3. 性能优化:避免重复执行高开销操作
  4. 代码组织:集中管理逻辑,提高可读性

记住计算属性的核心价值:

“计算属性不是普通的函数,而是具有智能缓存功能的响应式数据处理器”

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

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

相关文章

IPV6概述

1. 定义 IPv6&#xff08;Internet Protocol version 6&#xff09;是互联网协议的第六版&#xff0c;设计用于替代现有的 IPv4 协议。IPv6 提供了更大的地址空间、增强的路由效率、更好的安全性以及自动配置功能&#xff0c;以满足现代网络的需求。 1.1 地址空间 IPv6 地址长…

量子机器学习:AI算力突破量子优势临界点?

前言 前些天发现了一个巨牛的人工智能免费学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到网站 以下是为您撰写的第六篇CSDN深度技术解析文章&#xff0c;围绕前沿命题 《量子机器学习&#xff1a;AI算力突破量子优势临界点&…

Kerberos 深入详解:原理、认证流程与应用场景

目录 什么是 KerberosKerberos 原理解析Kerberos 认证完整流程Kerberos 应用场景常见问题与最佳实践参考资料 什么是 Kerberos Kerberos 是一种广泛应用于计算机网络中的身份认证协议&#xff0c;它基于对称密钥加密思想&#xff0c;核心目标是在不安全的网络中实现安全的身份…

mac安装node 实测可行

进入nodejs官网&#xff0c;选择mac,选择安装方式&#xff0c;选择版本即可获得安装命令 直接执行即可 具体脚本 # Download and install nvm: curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.3/install.sh | bash# in lieu of restarting the shell \. "…

山石网科谈平凡对话中的咒语——提示词注入攻击与防御

现场 2026 年 4 月 25 日上午&#xff0c;A市 初春的街道&#xff0c;阳光普照&#xff0c;鸟语花香&#xff0c;V 君中午要与一个重要的客户见面&#xff0c; 特意预约了人气正旺的星际咖啡馆&#xff0c;他家主打未来科幻风&#xff0c;之前去过几次&#xff0c; 服务周到、…

SpringMVC系列(五)(响应实验以及Restful架构风格(上))

0 引言 作者正在学习SpringMVC相关内容&#xff0c;学到了一些知识&#xff0c;希望分享给需要短时间想要了解SpringMVC的读者朋友们&#xff0c;想用通俗的语言讲述其中的知识&#xff0c;希望与诸位共勉&#xff0c;共同进步&#xff01; 本系列会持续更新&#xff01;&…

Windows 环境下设置 RabbitMQ 的 consumer_timeout 参数

在 Windows 环境下设置 RabbitMQ 的 consumer_timeout 参数&#xff0c;可以通过临时修改或永久修改两种方式实现。以下是具体操作步骤&#xff1a; 一、临时修改&#xff08;无需重启服务&#xff0c;但重启后失效&#xff09; ‌通过命令行动态设置‌ 打开命令提示符&#xf…

Python 中切换镜像源

在 Python 中切换镜像源主要涉及 pip 包管理器 和 conda 环境&#xff08;如 Anaconda、Miniconda&#xff09; 的配置。国内访问 Python 官方源&#xff08;PyPI&#xff09;可能较慢&#xff0c;因此推荐使用国内镜像源&#xff08;如阿里云、清华大学、豆瓣等&#xff09;。…

深入解析拓扑排序算法:从原理到C++实现

一、拓扑排序概述 拓扑排序(Topological Sorting)是对有向无环图(Directed Acyclic Graph&#xff0c;简称DAG)的顶点进行排序&#xff0c;得到一个线性序列&#xff0c;使得对于图中的任意一对顶点u和v&#xff0c;若存在一条从u到v的路径&#xff0c;则u在排序结果中出现在v…

图像质量对比感悟

具体任务&#xff1a; 在本次任务中&#xff0c;我需要对比两张1080p的yuv图片的清晰度&#xff0c;那么如何判断呢&#xff1f;主要是进行了主观判断和客观psnr的判断。 psnr解释&#xff1a; 定义&#xff1a; PSNR 用于衡量 两幅图像之间的差异&#xff08;通常是原始图像和…

机器学习(ML)-Scikit-Learn--快速入门

专栏:机器学习 个人主页:云端筑梦狮 一.数据集读取方法&#xff08;常用功能用熟即可不用背下来&#xff09; 以例子代表需要的知识点和方法。 1. 导入必要的库 from sklearn.datasets import load_iris import numpy as npload_iris()&#xff1a;用于加载鸢尾花数据集的…

SQL语句四大分类详解:DDL、DML、DQL、DCL

前言 SQL&#xff08;Structured Query Language&#xff09;是用于管理和操作关系型数据库的标准语言。无论是开发人员还是数据库管理员&#xff0c;掌握 SQL 是必不可少的技能。 SQL 根据功能的不同&#xff0c;通常被划分为 四大类&#xff1a; ✅ DDL&#xff08;数据定义…

如何将Word里每页的行数设置成50行

https://www.zhihu.com/question/357856175 本文来自知乎林听晴 第一步&#xff1a;新建一个Word文档 打开“页面布局”&#xff0c;之后点击图片圈起来的小图标&#xff0c;即可出现“页面设置”页面。 ​ ​ 路径&#xff1a;页面设置—文档网络&#xff0c;可以看到默认行…

纯前端本地文件管理器(VSCode风格)(浏览器对本地文件增删改查)

纯前端本地文件管理器&#xff08;VSCode风格&#xff09;(浏览器对本地文件增删改查) 简介 本项目为一个纯前端实现的本地文件管理器网页&#xff08;index.html&#xff09;&#xff0c;可在 Chrome/Edge 浏览器中直接打开&#xff0c;具备类似 VSCode 的本地文件夹操作体验…

windows安装wsl、Ubuntu、docker desktop

以下是Windows安装WSL&#xff08;Windows Subsystem for Linux&#xff09;及在Ubuntu中配置使用Docker的完整流程&#xff0c;整合了最新官方方案和常见问题解决方案&#xff1a; &#x1f527; 一、Windows安装WSL&#xff08;推荐WSL 2&#xff09; &#x1f4cd; 安装前提…

华为云Flexus+DeepSeek征文|云端智能加持:华为云ModelArts Studio提升Chat2DB的AI数据库管理效能

华为云FlexusDeepSeek征文&#xff5c;云端智能加持&#xff1a;华为云ModelArts Studio提升Chat2DB的AI数据库管理效能 前言一、华为云ModelArts Studio平台介绍1.1 ModelArts Studio介绍1.2 ModelArts Studio主要特点1.3 ModelArts Studio使用场景1.4 ModelArts Studio产品架…

微信小程序封装loading 修改

1. custom-loading.vue <template><view v-if"visible" class"custom-loading-mask" touchmove.stop.prevent><view class"custom-loading-container"><!-- 动态点点 --><text class"loading-text">{…

Windows环境下Docker容器化的安装与设置指南

哈喽&#xff0c;大家好&#xff0c;我是左手python&#xff01; 系统要求与准备工作 在开始安装和配置 Docker 之前&#xff0c;需要确保您的 Windows 系统满足以下要求&#xff1a; 操作系统版本&#xff1a;推荐使用 Windows 10 或更高版本&#xff0c;特别是 64 位版本。对…

0 数学习题本

零 引言 数学错题与好题总结 一 基础阶段 1 高数部分 习题册:武忠祥 660 1️⃣ 函数 极限 连续 2️⃣ 一元微分 3️⃣ 一元积分 4️⃣ 微分方程 5️⃣ 多元微分 6️⃣ 二重积分 7️⃣ 无穷级数 8️⃣ 空间几何 9️⃣ 多元积分 2 线代部分 习题册:汤家凤 1800 1️⃣ 行列式…

USB服务器的5个核心价值

USB服务器&#xff08;USB Server&#xff09;是一款专为企业级环境设计的创新型硬件解决方案&#xff0c;其核心使命在于解决物理USB设备&#xff08;如U盾、加密狗、身份认证Key等&#xff09;在分布式办公、远程协作及复杂IT架构中面临的接入、管理与安全难题。本文以朝天椒…