大家好我是Java1234_小锋老师最近更新 《一天学会 Vue3 Vite element-plus UI框架 视频教程》专辑感谢大家支持。本课程主要介绍和讲解 Vue3框架Vite构建工具以及element-plus UI框架。Vue3核心知识介绍Vite构建工具使用以及element-plus UI框架的基础组件配置组件Form 表单组件Data 数据展示组件Navigation导航组件Feedback反馈组件Container布局组件介绍和使用。视频教程课件源码打包下载链接https://pan.baidu.com/s/1o-zRfndo1HHrS_uFroOiCw?pwd1234提取码1234具体位置 - 第四阶段富客户端技术里面Vue3专题 - 计算属性 computed计算属性用来根据已有的响应式数据派生出新值。依赖变了它会自动更新依赖没变则使用缓存不会重复计算。适合总价、全名、过滤列表、格式化展示等「由别的数据算出来」的场景。1. 为什么需要计算属性模板里可以直接写表达式但复杂逻辑写在模板里会很难维护!-- 不推荐逻辑塞在模板里 -- p{{ firstName lastName }}/p p{{ price * count * (vip ? 0.8 : 1) }}/p用computed把计算逻辑抽出来模板更干净也方便复用和测试。2. 基本用法从vue引入computed传入一个返回派生值的函数。script setup /** * 计算属性基础 Demo * 根据名、姓自动拼出全名 */ import { ref, computed } from vue const firstName ref(张) const lastName ref(三) // 依赖 firstName、lastName自动拼出全名 const fullName computed(() { return firstName.value lastName.value }) /script template p姓{{ firstName }}/p p名{{ lastName }}/p p全名{{ fullName }}/p button clicklastName 四改名为「四」/button /template要点脚本里读计算属性要用.valuefullName.value模板里直接写{{ fullName }}不用.value默认是只读的不要往fullName里赋值运行截图3. 和普通方法有什么区别computed普通方法methods调用方式当属性用{{ total }}当函数调{{ getTotal() }}缓存有依赖不变不重算无每次渲染都执行适用纯派生、频繁读取事件处理、需要传参、有副作用简单记只根据已有数据算出一个值 → 用计算属性点击、请求、改状态 → 用方法。4. 入门 Demo购物总价把单价、数量、VIP 折扣串起来看计算属性如何自动更新。script setup /** * 购物总价 Demo * 演示 computed 根据多个依赖自动重算 */ import { ref, computed } from vue const price ref(29.9) // 单价 const qty ref(1) // 数量 const vip ref(false) // 是否 VIP // 应付金额VIP 打 8 折保留两位小数 const total computed(() { const sum price.value * qty.value const pay vip.value ? sum * 0.8 : sum return pay.toFixed(2) }) /** 数量 1 */ function add() { qty.value } /** 切换 VIP */ function toggleVip() { vip.value !vip.value } /script template div stylefont-family: sans-serif; max-width: 360px; margin: 40px auto; h2Vue3 计算属性 Demo/h2 p单价¥{{ price }}/p p数量{{ qty }}/p p身份{{ vip ? VIP8折 : 普通用户 }}/p p应付¥{{ total }}/p button clickadd数量 1/button button clicktoggleVip stylemargin-left: 8px; {{ vip ? 取消 VIP : 开通 VIP }} /button /div /template操作后你会看到点「数量 1」→qty变 →total自动重算点「开通 VIP」→vip变 →total按折扣更新price/qty/vip都没变时total不会重复计算有缓存运行截图 Vue3专题 - 计算属性 computed
大家好我是Java1234_小锋老师最近更新 《一天学会 Vue3 Vite element-plus UI框架 视频教程》专辑感谢大家支持。本课程主要介绍和讲解 Vue3框架Vite构建工具以及element-plus UI框架。Vue3核心知识介绍Vite构建工具使用以及element-plus UI框架的基础组件配置组件Form 表单组件Data 数据展示组件Navigation导航组件Feedback反馈组件Container布局组件介绍和使用。视频教程课件源码打包下载链接https://pan.baidu.com/s/1o-zRfndo1HHrS_uFroOiCw?pwd1234提取码1234具体位置 - 第四阶段富客户端技术里面Vue3专题 - 计算属性 computed计算属性用来根据已有的响应式数据派生出新值。依赖变了它会自动更新依赖没变则使用缓存不会重复计算。适合总价、全名、过滤列表、格式化展示等「由别的数据算出来」的场景。1. 为什么需要计算属性模板里可以直接写表达式但复杂逻辑写在模板里会很难维护!-- 不推荐逻辑塞在模板里 -- p{{ firstName lastName }}/p p{{ price * count * (vip ? 0.8 : 1) }}/p用computed把计算逻辑抽出来模板更干净也方便复用和测试。2. 基本用法从vue引入computed传入一个返回派生值的函数。script setup /** * 计算属性基础 Demo * 根据名、姓自动拼出全名 */ import { ref, computed } from vue const firstName ref(张) const lastName ref(三) // 依赖 firstName、lastName自动拼出全名 const fullName computed(() { return firstName.value lastName.value }) /script template p姓{{ firstName }}/p p名{{ lastName }}/p p全名{{ fullName }}/p button clicklastName 四改名为「四」/button /template要点脚本里读计算属性要用.valuefullName.value模板里直接写{{ fullName }}不用.value默认是只读的不要往fullName里赋值运行截图3. 和普通方法有什么区别computed普通方法methods调用方式当属性用{{ total }}当函数调{{ getTotal() }}缓存有依赖不变不重算无每次渲染都执行适用纯派生、频繁读取事件处理、需要传参、有副作用简单记只根据已有数据算出一个值 → 用计算属性点击、请求、改状态 → 用方法。4. 入门 Demo购物总价把单价、数量、VIP 折扣串起来看计算属性如何自动更新。script setup /** * 购物总价 Demo * 演示 computed 根据多个依赖自动重算 */ import { ref, computed } from vue const price ref(29.9) // 单价 const qty ref(1) // 数量 const vip ref(false) // 是否 VIP // 应付金额VIP 打 8 折保留两位小数 const total computed(() { const sum price.value * qty.value const pay vip.value ? sum * 0.8 : sum return pay.toFixed(2) }) /** 数量 1 */ function add() { qty.value } /** 切换 VIP */ function toggleVip() { vip.value !vip.value } /script template div stylefont-family: sans-serif; max-width: 360px; margin: 40px auto; h2Vue3 计算属性 Demo/h2 p单价¥{{ price }}/p p数量{{ qty }}/p p身份{{ vip ? VIP8折 : 普通用户 }}/p p应付¥{{ total }}/p button clickadd数量 1/button button clicktoggleVip stylemargin-left: 8px; {{ vip ? 取消 VIP : 开通 VIP }} /button /div /template操作后你会看到点「数量 1」→qty变 →total自动重算点「开通 VIP」→vip变 →total按折扣更新price/qty/vip都没变时total不会重复计算有缓存运行截图