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() 中这样写：
import { computed } from 'vue'
<p>export default {
props: {
score: {
type: Number,
default: 0,
validator: v => v >= 0 && v {
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 始终是响应式对象，包含三个属性，可直接用于模板循环渲染。
