setup中使用计算属性

<template>
  <div>
    <ul>
      <li v-for="(item, index) in stuList" :key="index">
        <span>{{ item.name }}</span> ——
        <span>{{ item.score }}</span>
      </li>
    </ul>
    <div>
      <button @click="addStudent">增加一个</button>
      <button @click="removeStudent">删除一个</button>
      <button @click="clearAll">清空</button>
      <h4>合计：{{ totalScore }}</h4>
    </div>
  </div>
</template>

<script>
import { ref, computed } from "vue";
export default {
  setup() {
    let stuList = ref([
      { name: "张三", score: 80 },
      { name: "李四", score: 78 },
      { name: "王五", score: 66 },
      { name: "周六", score: 95 },
    ]);
    // 定义计算属性
    let totalScore = computed({
      get: () => {
        return stuList.value.reduce((acc, cur) => {
          return acc + cur.score;
        }, 0);
      },
      set: (newValue) => {
        console.log("newValue", newValue);
      },
    });
    const getRandomIntInclusive = (min, max) => {
      min = Math.ceil(min);
      max = Math.floor(max);
      return Math.floor(Math.random() * (max - min + 1)) + min; //含最大值，含最小值
    };
    const addStudent = () => {
      stuList.value.push({ name: "孙七", score: 85 });
    };
    const removeStudent = () => {
      const index = getRandomIntInclusive(0, stuList.length - 1);
      stuList.value.splice(index, 1);
    };
    const clearAll = () => (stuList.value = []);
    return {
      stuList,
      totalScore,
      addStudent,
      removeStudent,
      clearAll,
    };
  },
};
</script>

<style scoped></style>

<template>
  <div>
    <ul>
      <li v-for="(item, index) in stuList" :key="index">
        <span>{{ item.name }}</span> ——
        <span>{{ item.score }}</span>
      </li>
    </ul>
    <div>
      <button @click="addStudent">增加一个</button>
      <button @click="removeStudent">删除一个</button>
      <button @click="clearAll">清空</button>
      <h4>合计：{{ totalScore }}</h4>
    </div>
  </div>
</template>

<script>
import { ref, computed } from "vue";
export default {
  setup() {
    let stuList = ref([
      { name: "张三", score: 80 },
      { name: "李四", score: 78 },
      { name: "王五", score: 66 },
      { name: "周六", score: 95 },
    ]);
    // 定义计算属性
    let totalScore = computed({
      get: () => {
        return stuList.value.reduce((acc, cur) => {
          return acc + cur.score;
        }, 0);
      },
      set: (newValue) => {
        console.log("newValue", newValue);
      },
    });
    const getRandomIntInclusive = (min, max) => {
      min = Math.ceil(min);
      max = Math.floor(max);
      return Math.floor(Math.random() * (max - min + 1)) + min; //含最大值，含最小值
    };
    const addStudent = () => {
      stuList.value.push({ name: "孙七", score: 85 });
    };
    const removeStudent = () => {
      const index = getRandomIntInclusive(0, stuList.length - 1);
      stuList.value.splice(index, 1);
    };
    const clearAll = () => (stuList.value = []);
    return {
      stuList,
      totalScore,
      addStudent,
      removeStudent,
      clearAll,
    };
  },
};
</script>

<style scoped></style>