在 Uniapp（基于 Vue.js）开发中，`computed`（计算属性）是一种特殊的属性，它能够根据其他数据的变化自动计算出新的值。与普通方法不同，计算属性会缓存计算结果，只有依赖的数据发生变化时才会重新计算。
二、为什么需要计算属性
1. 模板简洁：避免在模板中放入复杂的逻辑运算
2. 性能优化：自动缓存计算结果，减少不必要的重复计算
3. 响应式更新：当依赖数据变化时自动更新
4. 代码可维护性：将复杂逻辑集中管理
三、基本用法
1. 声明方式
javascript
export default {
data() {
return {
price: 10,
quantity: 5
}
},
computed: {
// 简单的计算属性
total() {
return this.price * this.quantity;
},
// getter和setter形式（较少使用）
fullName: {
get() {
return this.firstName + ' ' + this.lastName;
},
set(newValue) {
const names = newValue.split(' ');
this.firstName = names[0];
this.lastName = names[names.length - 1];
}
}
}
2. HTML中使用
html
四、高级用法与技巧
1.多个依赖的计算
javascript
computed:{
//当price或quantity任一变化时都会重新计算
discountedTotal(){
return (this.price*this .quantity)*(1-this.discountRate);
}
}
2 .结合过滤器使用
虽然Vue3已不推荐过滤器,但在UniApp中仍可使用:
javascript
computed:{ formattedDate(){ return dayjs(this .rawDate).format('YYYY-MM-DD'); } }
然后在模板中直接显示formattedDate即可。
3 .处理数组的常用场景
javascript
computed:{ //筛选已完成的任务 completedTasks(){ return this.tasks.filter(task=>task.completed); },
//统计未完成数 pendingTaskCount(){ return this.tasks.reduce((count,task)=>{ return task.completed?count:count+1; },0); } }
五 、注意事项
1.methods vs computed
- methods :每次渲染都会执行,适合事件处理函数
- computed :基于依赖缓存,适合派生数据
html
2 .避免副作用
不要在computed中进行异步操作或修改外部状态 ,它应该是纯函数。
3.Watch vs Computed
- watch :观察特定数据变化执行操作(如请求API)
- computed :返回一个新的派生值
六 、实战案例
javascript
export default{ data(){ return{ cartItems:[ {id:1,name:'商品A',price:100,quantity:2}, {id:2,name:'商品B',price200, quantity :3} ], discountRate:.9 }; },
computed:{ //购物车总数 totalQuantity(){return th is.cartItems.reduce((sum ,item)=>sum+item quantity ,0 );},
//总金额 subtotal (){return th is.cartItems.reduce((sum item)=> sum+item price * item quantity ,0 );},
//折后价 discountedTotal (){return th is.subtotal*th is.discountRate ;} } }
通过合理运用 `computed`,可以使你的UniApp代码更加清晰高效。记住它的核心特点:声明式编程、自动缓存和响应式更新,这将大大提升你的开发体验和应用性能。
文章点评