computed 依赖的数学的值发生变化的时候触发；如果依赖的值未变化，则使用缓存中的值。
相关视频 (opens new window)

两种书写方式

<template>
  <view class="content">
    <input class="border border-blue-500" v-model="aaa" type="text" />
    <input class="border border-green-500" v-model="bbb" type="text" />
    <view>{{ name }}</view>
    <view></view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
// let 定义变量  const 定义常量
const aaa = ref('') // setup 中必须使用 ref 相关操作
const bbb = ref('')

// computed 第一种书写方式
const name = computed(() => {
  // 依赖的属性 aaa bbb 只要其中任一一个值发生变动都会触发
  return aaa.value + '---' + bbb.value // 使用 ref 必须用 value 来获取值，不想使用 value 请使用 toRefs
})

// 第二种书写
// const name = computed({
//   get() {
//     return aaa.value + '+++' + bbb.value
//   },
//   set() {
//     // eslint-disable-next-line no-unused-expressions
//     aaa.value + '+++' + bbb.value
//   }
// })
</script>

对于对象的操作，删除可使用 splice() , 更新可使用 reduce() 2个函数。

<script setup lang="ts">
import { ref, computed, reactive } from 'vue'
// ts 定义类型
type shop = {
  name: string,
  num: number,
  price: number
}
let total = ref(0)
// reactive 重新赋值
const data = reactive<shop[]>([
  {
    name: '物品1',
    num: 1,
    price: 200
  },
  {
    name: '物品2',
    num: 1,
    price: 202
  },
  {
    name: '物品3',
    num: 1,
    price: 203
  }
])
const del = (index: number) => {
  // 给『数组』删除或添加元素 array.splice(index,howmany,item)
  // index 必须是数字，必需参数，从对象的第几个下标开始删除或添加元素
  // howmany 必须是数字，可选参数，可以是 0 ，规定应该删除多少个元素
  // item 可选参数，要添加到数组的新元素
  data.splice(index, 1)
}
// data 数据有变动时触发
total = computed<number>(() => {
  // reduce 作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。
  // array.reduce(total,currentValue,currentIndex,arr)
  // total 必需。初始值, 或者计算结束后的返回值。
  // currentValue 必需。当前元素
  // currentIndex 可选。当前元素的索引
  // arr 可选。当前元素所属的数组对象。
  return data.reduce((prev, next) => { // (prev, next)这里应该有4个参数的
    // prev 是上一次的值，首次渲染时为 currentValue
    // next 是 data 里面的每一个对象
    return prev + (next.num * next.price)
  }, 0) // currentValue 为 0
})
</script>