学习Vue3 第九章 （认识 computed 计算属性）

computed 用法

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

1.函数形式

<script setup lang="ts">
import { ref, computed, reactive } from 'vue'

let price = ref(0)

let m = computed<string>(() => {
  return '$' + price.value
})
price.value = 50
</script>

2. 对象形式

<template>
  <div>mul : {{mul}}</div>
  <div>price : {{price}}</div>

  <div @click="mul = 100">click</div>
</template>
<script setup lang="ts">
import { ref, computed, reactive } from 'vue'

let price = ref<number | string>(1)

let mul = computed({
  get: () => {
    return price.value
  },
  set: (value) => {
    price.value = 'set ' + value
  },
})
price.value = 50
console.log('price : ', price.value)
</script>

computed购物车案例

<template>
  <div>
    <table style="width: 800px" border>
      <thead>
        <tr>
          <th>名称</th>
          <th>数量</th>
          <th>价格</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr :key="index" v-for="(item,index) in data">
          <td align="center">{{item.name}}</td>
          <td align="center">
            <button @click="AddAnbSub(item, false)">-</button>
            {{item.num}}
            <button @click="AddAnbSub(item, true)">+</button>
          </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 align="center">总价： {{$total}}</td>
        </tr>
      </tfoot>
    </table>
  </div>
</template>
<script setup lang="ts">
import { ref, computed, reactive } from 'vue'
type Shop = {
  name: string
  num: number
  price: number
}

let $total = ref<number>(0)
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 AddAnbSub = (item: Shop, type: boolean): void => {
  if (item.num > 1 && !type) item.num--
  if (item.num <= 99 && type) item.num++
}

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

$total = computed<number>(() => {
  return data.reduce((prev, next) => {
    return prev + next.num * next.price
  }, 0)
})
</script>