Vue 3 中用 computed 实现评分组件星级渲染：根据 props.score 计算 full（满星数）、half（是否半星）、empty（空星数），三者之和恒为5，响应式更新并用于模板分组渲染。

Vue 3 中用 computed 实现评分组件的星级数量，核心是把「原始分数」（如 4.3）转换为「需要渲染的完整星、半星、空星数量」，并保持响应式更新。

明确星级计算逻辑

常见规则是：5 颗星对应满分 5 分，每 0.5 分对应半颗星。例如：

• 4.3 → 4 颗满星 + 1 颗半星 + 0 颗空星
• 3.0 → 3 颗满星 + 0 颗半星 + 2 颗空星
• 2.7 → 2 颗满星 + 1 颗半星 + 2 颗空星

关键步骤：取整得满星数、判断小数部分是否 ≥ 0.5 得半星数（最多 1）、剩余补空星（共 5 颗）。

在 setup 中用 computed 返回星级结构

假设父组件传入 score（number 类型，范围 0–5），在 setup() 中这样写：

立即学习“前端免费学习笔记（深入）”；

vue-composition-api-best-practices

Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。

下载

import { computed } from 'vue'
<p>export default {
props: {
score: {
type: Number,
default: 0,
validator: v => v >= 0 && v <= 5
}
},
setup(props) {
const stars = computed(() => {
const full = Math.floor(props.score)
const hasHalf = props.score % 1 >= 0.5
const empty = 5 - full - (hasHalf ? 1 : 0)</p><pre class="brush:php;toolbar:false;">  return {
    full,
    half: hasHalf ? 1 : 0,
    empty
  }
})

return { stars }

} }

这样 stars 始终是响应式对象，包含三个属性，可直接用于模板循环渲染。

模板中按结构渲染星星图标

用 v-for 分别渲染三组，顺序为：满星 → 半星 → 空星。推荐使用 Font Awesome 或 SVG 图标：

<template>
  <div class="rating">
    <span v-for="i in stars.full" :key="'full-' + i">&#9733;</span>
    <span v-if="stars.half" key="half">&#9734;</span>
    <span v-for="i in stars.empty" :key="'empty-' + i">&#9734;</span>
  </div>
</template>

注意：这里用 Unicode 实心星（★ `★`）和空心星（☆ `☆`），半星可用 CSS 裁剪或专用图标库支持；若需真正半星效果（左实右空），建议用 SVG 或背景遮罩，但 computed 层只需提供「是否需要半星」的布尔信号即可。

可选：支持只读与交互（如 hover 评分）

computed 本身只负责「展示态」计算。若要支持用户点击打分，应额外定义 methods 或 emit，并用另一个 computed 区分「当前显示分」和「hover 临时分」。例如：

const displayScore = computed(() => props.score) // 当前值
const hoverScore = ref(0)
const hoveredStars = computed(() => {
  const s = hoverScore.value || displayScore.value
  return {
    full: Math.floor(s),
    half: s % 1 >= 0.5 ? 1 : 0,
    empty: 5 - Math.floor(s) - (s % 1 >= 0.5 ? 1 : 0)
  }
})

再结合 @mouseenter 和 @mouseleave 控制 hoverScore，就能实现悬停预览效果。