vue3学习（四）computed计算属性

computed计算属性

计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。

vue2中的用法

computed: {
  reversedMessage: function () {
    return this.message.split('').reverse().join('')
  }
}

例如只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。

vue3中用法：

（1）函数形式

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


<script setup lang='ts'>
import { ref, computed } from 'vue'
let first = ref('')
let last = ref('')
let name = computed(() => {
  return first.value + '----' + last.value
}) 

</script>

（2）对象形式

<template>
  <input v-model="first" type="text">
  <input v-model="last" type="text">
  <div>{{ name }}</div>
</template>
<script setup lang='ts'>
import { ref, computed } from 'vue'
let first = ref('')
let last = ref('')
let name = computed({
  get() {
    return first.value + '----' + last.value
  },
  set() {
    first.value + '----' + last.value
  }
})

</script>

购物车个案例

<template>
  <table border class="table">
    <thead>
      <tr>
        <th>名称</th>
        <th>数量</th>
        <th>单价</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(item, index) in data" :key="index">
        <th align="center">{{ item.name }}</th>
        <th><button @click="addAndSub(item, false)">-</button><span class="num">{{ item.num }}</span><button
            @click="addAndSub(item, true)">+</button></th>
        <th>{{ item.price }}</th>
        <th>
          <button @click="del(index)">删除</button>
        </th>
      </tr>
    </tbody>
    <tfoot>
      <td></td>
      <td></td>
      <td></td>
      <td align="center">总价：{{ totalPrice }}</td>
    </tfoot>
  </table>
</template>

<script setup lang='ts'>
import { ref, computed } from 'vue'
type Shop = {
  name: string,
  num: number,
  price: number
}
const data = ref<Shop[]>(
  [
    {
      name: '牛仔裤',
      num: 1,
      price: 200
    },
    {
      name: '长筒靴',
      num: 1,
      price: 300
    },
    {
      name: '斜挎包',
      num: 2,
      price: 350
    }
  ]
)
// 数量加减
const addAndSub = function (item: Shop, type: boolean): void {
  if (item.num > 1 && !type) {
    item.num--
  } else if (item.num < 99 && type) {
    item.num++
  }
}


// 删除功能
const del = (index: number) => {
  data.value.splice(index, 1)
}
// 计算总价
// let totalPrice:number
let totalPrice = computed<number>(() => {
  let result = 0
  for (let i = 0; i < data.value.length; i++) {
    result += data.value[i].num * data.value[i].price
  }
  return result
  /* return data.value.reduce((prve, next) => {
    return prve + (next.num * next.price)
  }, 0) */
})