vue2 计算属性监听进球数

假设你的数据中有一个数组 `goals`，其中包含每个球员的进球数，你可以使用 Vue2 的计算属性来监听这个数组的变化并计算总进球数。代码如下：

<template>
  <div>
    <p>总进球数：{{ totalGoals }}</p>
    <button @click="addGoal">增加进球</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      goals: [1, 2, 3, 4]
    }
  },
  computed: {
    totalGoals() {
      return this.goals.reduce((total, goal) => total + goal, 0)
    }
  },
  methods: {
    addGoal() {
      this.goals.push(1)
    }
  }
}
</script>

在上述代码中，我们定义了一个计算属性 `totalGoals`，它使用 `Array.reduce` 方法对数组 `goals` 中的所有值进行求和，并在模板中渲染总进球数。我们还定义了一个 `addGoal` 方法，用于向 `goals` 数组中添加一个元素。由于 `totalGoals` 计算属性依赖于 `goals` 数组，因此当调用 `addGoal` 方法时，`totalGoals` 也会重新计算。