7 computed计算属性

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

1.函数形式

<template>
  <div>
    <input v-model="firstName" type="text" />
    <input v-model="lastName" type="text" />
  </div>
  <div>
    {{ name }}
  </div>
</template>

<script setup lang="ts">
import { computed, reactive, ref } from "vue";
let firstName = ref("");
let lastName = ref("");
const name = computed(() => {
  return firstName.value + "`````" + lastName.value;
});
</script>

<style scoped>
</style>

2.对象形式

<template>
  <div>
    <input v-model="firstName" type="text" />
    <input v-model="lastName" type="text" />
  </div>
  <div>
    {{ name }}
  </div>
</template>

<script setup lang="ts">
import { computed, reactive, ref } from "vue";
let firstName = ref("");
let lastName = ref("");
const name = computed({
  get() {
    return firstName.value + lastName.value;
  },
  set() {
    firstName.value + lastName.value;
  },
});
</script>

<style scoped>
</style>

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="AddAndSub(item, false)">-</button>
            {{ item.num }}
            <button @click="AddAndSub(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 { computed, reactive, ref } from "vue";
type Shop = {
  name: string;
  num: number;
  price: number;
};
let $total = ref<number>(0);
const data = reactive<Shop[]>([
  {
    name: "stock",
    num: 1,
    price: 100,
  },
  {
    name: "cloth",
    num: 1,
    price: 200,
  },
  {
    name: "hat",
    num: 1,
    price: 300,
  },
]);
const AddAndSub = (item:Shop,type:boolean = false):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>

<style scoped>
</style>