vue3计算属性computed与监听watch的使用

<script setup lang="ts">
import { ref, computed, reactive, watch } from 'vue';
interface Data {
  name: string,
  num: number,
  price: number
}
// import HelloWorld from './components/HelloWorld.vue'
let data = reactive<Data[]>([{
  name: '帽子',
  num: 5,
  price: 10
}, {
  name: '衣服',
  num: 5,
  price: 10
}, {
  name: '裤子',
  num: 5,
  price: 10
}, {
  name: '鞋子',
  num: 5,
  price: 10
}])
// let total = computed(() => {
//   return data.reduce((pre: number, next: Data) => {
//     return pre + next.num * next.price
//   }, 0)
// })
let keyWord = ref<string>("")
const del = (index: number) => {
  data.splice(index, 1)
}
// const ser = computed(() => {
//   return data.filter((item: Data) => { return item.name.includes(keyWord.value) })
// })
let total = ref<number>(0)
let ser = reactive<Data[]>([{ name: '', num: 0, price: 0 }])
watch([data, keyWord], () => {
  total.value = data.reduce((pre: number, next: Data) => {
    return pre + next.num * next.price
  }, 0)
  ser = data.filter((item: Data) => { return item.name.includes(keyWord.value) })
}, {
  immediate: true
})

// watch(total, () => {
//   data.reduce((pre: number, next: Data) => {
//     return pre + next.num * next.price
//   }, 0)
// })
</script>

<template>
  <!-- <div>
    <a href="https://vitejs.dev" target="_blank">
      <img src="/vite.svg" class="logo" alt="Vite logo" />
    </a>
    <a href="https://vuejs.org/" target="_blank">
      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
    </a>
  </div> -->
  <!-- <HelloWorld msg="Vite + Vue" /> -->
  <div><input type="text" v-model="keyWord" placeholder="搜索"></div>
  <div>
    <table border cellspacing="0" cellpadding="0">
      <thead>
        <th>
          名称
        </th>
        <th>
          数量
        </th>
        <th>
          单价
        </th>
        <th>
          总价
        </th>
        <th>操作</th>
      </thead>
      <tbody>
        <tr v-for="(item, index) in ser" :key="index">
          <td>{{ item.name }}</td>
          <td><button @click="item.num > 0 ? item.num-- : null">-</button>{{ item.num }}<button
              @click="item.num < 9999 ? item.num++ : null">+</button></td>
          <td>{{ item.price }}</td>
          <td>{{ item.price * item.num }}</td>
          <td><button @click="del(index)">删除</button></td>
        </tr>
        <tr>
          <td>总价</td>
          <td colspan="4">{{ total }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<style scoped>
* {
  padding: 0;
  margin: 0;
}

.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}

.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}

.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>

自用