Vue新手求助：如何在给定雷达图代码中自动计算展示玩家数值总和

关于Vue中使用原生JS的疑问 #

Vue本身就是原生JavaScript封装的前端库，完全支持在Vue代码中直接写所有原生JS逻辑，没有任何限制。你现有代码中用到的数组map方法、Math对象的三角函数、普通自定义函数valueToPoint都是原生JS的内容，都可以在Vue中正常运行。

实现玩家value总和自动计算 #

你可以用Vue的*计算属性（computed）*来实现这个需求，计算属性会自动监听依赖的响应式数据变化，自动更新计算结果，非常适合这类场景：

1. 首先在你现有的根Vue实例中新增computed配置项，添加总和计算逻辑：

new Vue({
    el: "#app",
    data: {
        newLabel: "",
        players: players,
        width: 600
    },
    // 新增计算属性
    computed: {
        totalPlayerValue() {
            // 直接使用原生JS的数组reduce方法求和即可
            return this.players.reduce((sum, current) => sum + current.value, 0)
        }
    },
    // 原有methods、components配置保持不变即可
    methods: {
        // ... 原有代码
    },
    components: {
        // ... 原有代码
    }
})

2. 然后在HTML的#app容器内任意位置插入插值表达式，就可以展示总和了，结果会随玩家列表、玩家value的变化自动更新：

<div id="app">
    <!-- 原有页面内容 -->
    <div>所有玩家value总和：{{ totalPlayerValue }}</div>
</div>

Vue中数学计算的常用规则 #

• 简单的一次性计算可以直接写在模板插值里，比如{{ player.value * 0.8 }}
• 依赖多个响应式数据、需要复用的计算逻辑优先写在computed里，计算属性有缓存特性，重复调用不会重复计算，性能更好
• 通用的计算工具函数可以直接封装成原生JS的公共函数，也可以挂载到Vue的methods中使用，所有原生JS的Math API都可以直接调用，没有额外限制。

内容的提问来源于stack exchange，提问作者Emanuele Irenei