uniapp的计算属性
计算属性的基本概念
在 UniApp 中，计算属性（Computed Properties）是 Vue.js 的核心特性之一，用于基于响应式依赖进行动态计算。计算属性会根据依赖的数据自动缓存结果，只有当依赖发生变化时才会重新计算，适合处理复杂逻辑或需要缓存的场景。
计算属性的定义方式
在 UniApp 的 Vue 组件中，计算属性通过 computed 选项定义，通常以函数形式返回计算结果。例如：
export default {
data() {
return {
price: 10,
quantity: 5
};
},
computed: {
total() {
return this.price * this.quantity;
}
}
};此处 total 会动态计算 price 和 quantity 的乘积，且结果会被缓存。
计算属性与方法的区别
- 计算属性：基于依赖缓存，只有依赖变化时才重新计算，适合性能敏感场景。
- 方法：每次调用都会重新执行，适合需要实时计算的场景。
示例对比：methods: { calculateTotal() { return this.price * this.quantity; } }
计算属性的 setter 和 getter
计算属性默认只有 getter，但可以通过对象形式定义 setter：
computed: {
fullName: {
get() {
return this.firstName + ' ' + this.lastName;
},
set(newValue) {
const names = newValue.split(' ');
this.firstName = names[0];
this.lastName = names[1];
}
}
}通过 fullName = "John Doe" 可以触发 setter 更新 firstName 和 lastName。
计算属性的依赖追踪
计算属性会自动追踪其依赖的响应式数据。例如：
computed: {
discountedTotal() {
return this.total * (1 - this.discount);
}
}discountedTotal 会依赖 total 和 discount，任一变化都会触发重新计算。
计算属性的使用场景
- 复杂逻辑封装：如格式化日期、过滤列表数据。
- 性能优化：避免模板中重复计算。
- 动态样式或类名：根据数据生成样式。
示例：computed: { statusClass() { return this.isActive ? 'active' : 'inactive'; } }
注意事项
- 避免在计算属性中执行异步操作或副作用（如修改外部状态）。
- 计算属性应保持纯函数特性，仅依赖响应式数据。
- 对于大量数据计算，可结合
watch或手动优化逻辑。
通过合理使用计算属性，可以显著提升 UniApp 应用的性能和代码可维护性。
