Vue 3 的 computed 适合自动划分考试成绩等级：基础用法对单分数返回等级，进阶用法批量为学生成绩列表添加 level 字段，并支持基于等级的过滤与统计。
Vue 3 的 computed 非常适合实现考试成绩等级的自动划分——它能响应式监听分数变化，只在分数更新时重新计算等级，且结果自动缓存，避免重复执行逻辑。
基础写法：根据单个分数返回等级
适用于学生详情页、成绩卡片等展示单科分数等级的场景：
- 用
ref存储原始分数（如score = ref(85)） - 用
computed封装判断逻辑，直接返回字符串等级 - 模板中直接使用
{{ grade }}，无需.value（Vue 自动解包）
示例代码：
<script setup><br> import { ref, computed } from 'vue'<br> const score = ref(85)<br> const grade = computed(() => {<br> if (score.value >= 90) return 'A'<br> else if (score.value >= 80) return 'B'<br> else if (score.value >= 70) return 'C'<br> else if (score.value >= 60) return 'D'<br> else return 'F'<br> })<br> </script>进阶用法：对学生成绩列表批量计算等级
适用于成绩表格、统计看板等需要为多条记录统一生成等级的场景：
vue-admin-change-reviewer
下载
审查 Vue 管理后台的变更请求（Vue 2 + Element UI，Vue 3 + Element Plus）。重点关注最小化变更实现、上线风险检查以及回归检查清单生成。
立即学习“前端免费学习笔记（深入）”；
- 用
ref或reactive管理成绩数组（如students = ref([...])） -
computed返回一个新数组，每个元素包含原始数据 + 计算出的level字段 - 依赖自动追踪整个数组及每个对象的
score属性
示例：
const students = ref([{ id: 1, name: '张三', score: 92 },
{ id: 2, name: '李四', score: 76 },
{ id: 3, name: '王五', score: 58 }
])
const studentsWithLevel = computed(() =>
students.value.map(s => ({
...s,
level: s.score >= 90 ? '优秀' :
s.score >= 75 ? '良好' :
s.score >= 60 ? '合格' : '不合格'
}))
)
结合过滤与排序：动态筛选某等级学生
比如“只显示‘优秀’学生”或“按等级分组统计”，可再套一层 computed：
- 复用已有的
studentsWithLevel作为数据源 - 新增
excellentStudents计算属性，内部用.filter()提取 - 同样具备响应式和缓存特性，不会因模板多次调用而重复遍历
示例：
const excellentStudents = computed(() =>studentsWithLevel.value.filter(s => s.level === '优秀')
)
const levelCount = computed(() => {
const count = { 优秀: 0, 良好: 0, 合格: 0, 不合格: 0 }
studentsWithLevel.value.forEach(s => count[s.level]++)
return count
})
注意事项
- 不要在
computed函数里执行副作用（如发请求、改 DOM、调用alert） - 确保所有被读取的字段都是响应式数据（
ref.value或reactive对象属性），否则无法触发更新 - 若需支持修改等级（如人工覆盖），应使用可写计算属性（
computed({ get, set })），但考试系统中通常不建议手动干预自动等级
