Vue Academy · 课时

计算属性

Q: 「计算属性」这节课中我会学到什么？

使用计算属性派生经过缓存的响应式值 你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

使用计算属性派生经过缓存的响应式值

计算属性 是 CoddyKit 上的免费 Vue Academy 课时。这是第 2 节课，共 3 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Vue Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Vue Academy 课程共包含 3 节课。

什么是计算属性

计算属性根据其他响应式数据派生出一个值。

只有依赖发生变化时，它才会重新计算
在模板中，它的读取方式与普通属性相同
它将逻辑移入 JS，让模板保持简洁

定义 computed

在组合式 API 中，请使用 computed 函数。

import { ref, computed } from "vue"

const firstName = ref("Ada")
const lastName = ref("Lovelace")

const fullName = computed(() => {
  return firstName.value + " " + lastName.value
})

在模板中使用 computed

访问 computed 的方式与访问数据属性相同，无需加括号。

<template>
  <p>{{ fullName }}</p>
</template>

<!-- fullName updates automatically when
     firstName or lastName change -->

计算属性与方法

方法也会返回一个值，那么为什么要使用计算属性呢？

计算属性会根据依赖进行缓存
方法在每次渲染调用时都会运行

对于反复使用的派生值，计算属性更加高效。

缓存的实际效果

只有依赖发生变化时，computed 才会重新运行。如果多次读取它，会复用缓存的结果。

const expensive = computed(() => {
  console.log("computing...")
  return heavyCalculation(data.value)
})

// Reading expensive twice in one render
// logs "computing..." only once

方法每次都会运行

相比之下，方法会在每次调用时重新计算，即使输入没有发生变化也是如此。

// In template: {{ getTotal() }} {{ getTotal() }}
// Calls getTotal twice, recomputing both times

methods: {
  getTotal() {
    return this.price * this.qty
  }
}

选项式 API 中的 computed

选项式 API 在 computed 块中声明计算属性。

export default {
  data() {
    return { price: 10, qty: 3 }
  },
  computed: {
    total() {
      return this.price * this.qty
    }
  }
}

计算属性获取器

默认情况下，计算属性是只读的：它只有一个获取器。

每当依赖发生变化时，获取器就会运行并生成值。

const doubled = computed(() => count.value * 2)

// You can read doubled.value
// but assigning to it would warn

计算属性设置器

同时提供 get 和 set 函数，即可让计算属性变为可写。

const fullName = computed({
  get() {
    return first.value + " " + last.value
  },
  set(newValue) {
    const parts = newValue.split(" ")
    first.value = parts[0]
    last.value = parts[1]
  }
})

使用设置器

向可写的计算属性赋值时，它的设置器会运行。

fullName.value = "Grace Hopper"

// The setter splits and assigns:
// first.value -> "Grace"
// last.value  -> "Hopper"

何时使用计算属性

当您需要从响应式 state 中派生值时，请使用计算属性。

筛选或排序列表
格式化用于显示的数据
将多个值合并为一个值

当您需要通过副作用进行响应时，请使用侦听器（下一节）。

快速检查

测试您对计算属性的理解。

回顾：计算属性

您了解了派生 state：

computed 根据响应式数据派生值
它会被缓存，仅在依赖发生变化时重新计算
方法每次调用都会运行，而计算属性不会
计算属性可以包含一个获取器和可选的设置器

下一节：侦听器和深层响应式。

常见问题解答

「计算属性」课时是免费的吗？

是的 — 「计算属性」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Vue Academy 课程的其余内容，请升级到 CoddyKit PRO。 Vue Academy 课程共包含 3 节课。

「计算属性」这节课中我会学到什么？

使用计算属性派生经过缓存的响应式值你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Vue Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Vue Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 2 节课，共 3 节。

「计算属性」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Vue Academy 课中编写并运行代码吗？

能。每节 Vue Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Vue Academy