Vue.js 计算属性（长文讲解）

Vue.js 计算属性：让数据逻辑更清晰的利器

在使用 Vue.js 开发前端应用时，你是否遇到过这样的场景：页面上需要展示多个数据的组合结果，比如用户姓名和年龄拼接成一句话，或者购物车中商品总价的动态计算？如果把这些逻辑直接写在模板里，代码会变得冗长、难以维护，甚至容易出错。

这时候，Vue.js 提供的“计算属性”就派上用场了。它不仅能让你的模板保持简洁，还能提升应用的性能。本文将带你从零开始，深入理解 Vue.js 计算属性的本质、用法和最佳实践，帮助你写出更优雅、更高效的 Vue 代码。

什么是计算属性？它和方法有什么不同？

在 Vue 2 和 Vue 3 中，计算属性（computed properties）是一种用于声明式地描述依赖数据之间关系的机制。它不是函数调用，而是一种“响应式的数据派生机制”。

想象一下，你在做一道数学题：已知一个长方形的长是 10 厘米，宽是 5 厘米，要求计算面积。如果你每次都要重新写 10 * 5，那太麻烦了。更好的做法是定义一个变量 area = length * width，然后直接使用 area。Vue.js 计算属性就是这个“area”变量的实现。

与普通方法（methods）相比，计算属性有两大核心优势：

1. 缓存机制：只有当依赖的数据发生变化时，计算属性才会重新计算，否则直接返回缓存结果。
2. 响应式绑定：它能自动追踪依赖的数据变化，一旦依赖项更新，计算结果也会自动刷新。

// 示例：对比方法与计算属性
export default {
  data() {
    return {
      firstName: '张',
      lastName: '三',
      price: 100,
      quantity: 3
    }
  },
  methods: {
    // 方法：每次调用都执行函数
    fullName() {
      return this.firstName + this.lastName
    },
    totalPrice() {
      return this.price * this.quantity
    }
  },
  computed: {
    // 计算属性：仅在依赖变化时重新计算
    fullNameComputed() {
      return this.firstName + this.lastName
    },
    totalPriceComputed() {
      return this.price * this.quantity
    }
  }
}

注释：methods 中的方法每次渲染都会执行，而 computed 只有依赖（如 firstName）变化时才会重新计算，效率更高。

计算属性的基本语法与使用场景

在 Vue 组件中，使用 computed 选项来定义计算属性。它是一个对象，键是计算属性的名称，值是一个函数。

创建数组与初始化

我们先通过一个简单的例子来展示基本用法。假设有一个用户列表，需要筛选出年龄大于 18 岁的用户。

export default {
  data() {
    return {
      users: [
        { name: '小李', age: 20 },
        { name: '小王', age: 16 },
        { name: '小赵', age: 25 }
      ]
    }
  },
  computed: {
    // 过滤出成年用户
    adultUsers() {
      return this.users.filter(user => user.age >= 18)
    }
  }
}

注释：adultUsers 是一个计算属性，它依赖 users 数组。当 users 发生变化时，adultUsers 会自动重新计算。如果 users 没变，就直接返回缓存值。

在模板中使用时，就像使用普通数据一样：

<ul>
  <li v-for="user in adultUsers" :key="user.name">
    {{ user.name }}（{{ user.age }}岁）
  </li>
</ul>

这个写法比在模板中直接写 v-for 配合 filter 方法更清晰，也更高效。

计算属性的依赖追踪机制

Vue.js 的计算属性内部使用了响应式系统，它能自动分析函数中读取的数据，建立“依赖图”。

例如：

computed: {
  message() {
    return this.firstName + ' ' + this.lastName + '，今天天气真好！'
  }
}

Vue 会自动识别出 message 依赖于 firstName 和 lastName。当这两个数据任一变化时，message 就会更新。

但注意：如果计算属性中访问了未定义的数据，或者写法不规范，可能无法正确追踪依赖。

常见错误示例

// ❌ 错误写法：依赖无法被追踪
computed: {
  badCalculation() {
    if (this.user && this.user.profile) {
      return this.user.profile.age * 2
    }
    return 0
  }
}

虽然逻辑正确，但如果 user 或 profile 是响应式的，这种写法可能导致依赖追踪不完整。推荐使用更明确的结构：

// ✅ 推荐写法：确保依赖项被显式引用
computed: {
  profileAge() {
    return this.user?.profile?.age || 0
  },
  doubleAge() {
    return this.profileAge * 2
  }
}

注释：使用可选链操作符 ?. 可以避免因数据缺失导致的运行时错误，同时保持响应式追踪能力。

计算属性 vs 方法：何时该用哪个？

虽然两者都能实现类似功能，但选择哪一个取决于使用场景。

实际案例对比

假设你要实现一个“倒计时”功能：

// 使用方法：每次渲染都重新计算
methods: {
  countdown() {
    const now = new Date()
    const target = new Date('2024-12-31')
    return Math.floor((target - now) / 1000)
  }
}

// 使用计算属性：只在依赖变化时更新
computed: {
  countdown() {
    const now = new Date()
    const target = new Date('2024-12-31')
    return Math.floor((target - now) / 1000)
  }
}

注释：虽然 countdown 本身不依赖组件数据，但如果我们希望它每秒刷新一次，应该配合 watch 或 setInterval，而不是依赖计算属性缓存。

高级用法：计算属性的 setter 与双向绑定

Vue.js 的计算属性不仅支持 getter，还支持 setter，这使得它能用于双向绑定场景。

使用场景：格式化输入框

假设你要让用户输入金额，但希望显示时带“元”单位。

export default {
  data() {
    return {
      rawAmount: 100
    }
  },
  computed: {
    // getter：将数字转为带单位的字符串
    amount() {
      return this.rawAmount + ' 元'
    },
    // setter：当输入框改变时，提取数字部分
    amount: {
      get() {
        return this.rawAmount + ' 元'
      },
      set(value) {
        // 移除“元”字，转换为数字
        const num = parseFloat(value.replace(' 元', ''))
        this.rawAmount = isNaN(num) ? 0 : num
      }
    }
  }
}

在模板中使用：

<input v-model="amount" placeholder="输入金额" />

注释：v-model 会自动调用 get 获取显示值，调用 set 更新数据。这种写法非常适合表单字段的格式化处理。

总结：Vue.js 计算属性的核心价值

Vue.js 计算属性是构建响应式 UI 的核心工具之一。它让复杂的数据逻辑变得清晰可读，同时通过缓存机制显著提升性能。

• 它不是普通函数，而是响应式数据的“派生器”。
• 依赖追踪机制自动维护数据一致性。
• 适合处理与视图直接相关的数据转换。
• 支持 setter，可用于双向绑定场景。

如果你还在为模板中写太多逻辑而困扰，不妨把它们移到 computed 中。这不仅让代码更整洁，也更容易测试和维护。

记住：Vue.js 计算属性不是“可有可无”的功能，而是构建高质量前端应用的必备技能。掌握它，你就离写出“Vue 风格”的代码更近了一步。