第 8 课：computed派生状态

• 日期：2026-09-09
• 课程序号：第 8 课
• 知识点：computed 计算属性

用途

根据原始课程列表计算完成数量，避免维护重复状态。

核心概念

computed 的结果由响应式依赖派生；依赖改变时结果自动更新，无需手动同步副本。

最小代码或操作示例

<script setup>
import { computed, ref } from 'vue'
const lessons = ref([{ done: true }, { done: false }])
const doneCount = computed(() => lessons.value.filter(item => item.done).length)
</script>
<template><p>完成 {{ doneCount }} 课</p></template>

3～5 分钟练习

把第二项的 done 改为 true，预测页面数字。

参考答案

依赖变化后 doneCount 自动变为 2，不需要单独赋值。

与上一课的联系

上一课用 v-for 渲染原始列表；本课从同一列表派生汇总信息。