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>