Vue3系列5--computed计算属性

1 computed用法

计算属性就是当依赖的属性的值发生变化的时候，才会触发他的更改，如果依赖的值，不发生变化的时候，使用的是缓存中的属性值。

• 函数形式

import { computed, reactive, ref } from 'vue'
let price = ref(0)//$0
 
let m = computed<string>(()=>{
   return `$` + price.value
})
 
price.value = 500

• 对象形式

<template>
   <div>{{ mul }}</div>
   <div @click="mul = 100">click</div>
</template>
 
<script setup lang="ts">
import { computed, ref } from 'vue'
let price = ref<number | string>(1)//$0
let mul = computed({
   get: () => {
      return price.value
   },
   set: (value) => {
      price.value = 'set' + value
   }
})
</script>
 
<style>
</style>

2 computed购物车案例

<template>
  <div>
    <table sytle="width:1500px" border>
      <thead>
        <tr>
          <td>名称</td>
          <td>数量</td>
          <td>单价</td>
          <td>单个商品总价</td>
          <td>操作</td>
        </tr>
      </thead>
      <tbody>
        <tr :key="index" v-for="(item, index) in data">
          <td align="center">{{ item.name }}</td>
          <td align="center">
            <button @click="AddORSub(item, false)">-</button>
            {{ item.num }}
            <button @click="AddORSub(item, true)">+</button>
          </td>
          <td align="center">{{ item.price }}</td>
          <td align="center">{{ item.num * item.price }}</td>
          <td align="center"><button @click="del(index)">删除</button></td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td>总价:{{$mytotal}}</td>
        </tr>
      </tfoot>
    </table>
  </div>
</template>


<script setup lang="ts">
import { computed } from '@vue/reactivity';
import { nextTick, reactive ,ref} from 'vue';
let $mytotal = ref<number>(0)

type Shop = {
  name:string,
  num:number,
  price:number
}

const data = reactive<Shop[]>([
  {
    name: "袜子",
    num: 1,
    price: 100
  },
  {
    name: "裤子",
    num: 1,
    price: 200
  },
  {
    name: "衣服",
    num: 1,
    price: 300
  },
  {
    name: "毛巾",
    num: 1,
    price: 400
  }
])

const AddORSub = (item: Shop, type: boolean): void => {
  if (item.num > 1 && !type) {
    item.num--
    // total()
  }
  if (item.num < 99 && type) {
    item.num++
    // total()
  }
}

const del=(index:number)=>{
  data.splice(index,1)
}

$mytotal = computed(()=>{
  return data.reduce((prev,next)=>{
    console.log('prev',prev)
    console.log('next',next)
    return prev + next.num*next.price
  },0)
})

// const total=()=>{
//   $mytotal.value = data.reduce((prev,next)=>{
//     return prev + next.num*next.price
//   },0)
// }
// total()

</script>