当前位置：首页 > uni-app

uniapp的计算属性

2026-03-05 15:04:44uni-app

计算属性的基本概念

在UniApp中，计算属性（Computed Properties）是Vue.js的核心特性之一，用于基于响应式依赖进行动态计算。当依赖的数据发生变化时，计算属性会自动重新计算并缓存结果，避免重复计算。

计算属性的定义方式

在Vue组件的computed选项中定义计算属性。语法如下：

uniapp的计算属性

computed: {
  propertyName() {
    // 计算逻辑
    return this.dependencyData * 2;
  }
}

propertyName是计算属性的名称，通过this.propertyName访问。
计算属性必须返回一个值，结果会被缓存直到依赖数据变化。

计算属性的特点

自动依赖追踪：计算属性会根据其内部依赖的响应式数据自动更新。
高效缓存：只有当依赖数据变化时才会重新计算，否则直接返回缓存值。
响应式更新：依赖数据变化时，计算属性的值会触发视图重新渲染。

计算属性与方法的区别

计算属性：基于依赖缓存，适合复杂逻辑或频繁调用的场景。
方法：每次调用都会重新执行，适合无需缓存或需要参数传递的场景。

计算属性的实际示例

假设有一个商品价格和数量的场景：

uniapp的计算属性

data() {
  return {
    price: 10,
    quantity: 5
  };
},
computed: {
  totalPrice() {
    return this.price * this.quantity; // 当price或quantity变化时自动更新
  }
}

在模板中直接使用：

<view>总价：{{ totalPrice }}</view>

计算属性的Setter

计算属性默认只有Getter，但可以通过定义Setter实现双向绑定：

computed: {
  fullName: {
    get() {
      return this.firstName + ' ' + this.lastName;
    },
    set(newValue) {
      const names = newValue.split(' ');
      this.firstName = names[0];
      this.lastName = names[1];
    }
  }
}