computed 基础语法

<template><div><div>性：<input v-model="firstName" type="text"></div><div>名：<input v-model="lastName" type="text"></div><div>全名：<input v-model="fullName" type="text"></div><button @click="changeName">changeName</button></div>
</template><script setup lang="ts">
import { ref, computed } from 'vue';
let firstName = ref('zhang')
let lastName = ref('san')// 1.选项式写法 支持一个对象传入getter和setter自定义操作
let fullName = computed<string>({get () {return firstName.value + '-' + lastName.value},set(newVal) {console.log(newVal.split('-'));[firstName.value,lastName.value] = newVal.split('-')}
})
const changeName = () => [fullName.value = 'xiao-hu'
]//2.函数式写法，只能支持一个getter函数，不可以修改值
// let fullName = computed(() => firstName.value + '-' + lastName)
// 不可以修改
// const changeName = () => {
//   fullName.value = 'xiao-hu'
// }
</script><style lang="scss" scoped></style>

购物车小案例

未使用computed优化

<template><div><input placeholder="搜索" type="text"></div><div style="margin-top: 20px"><table border width="600" cellpadding="0" cellspacing="0"><thead><tr><th>物品名称：</th><th>物品单价：</th><th>物品数量：</th><th>物品总价：</th><th>操作</th></tr></thead><tbody><tr v-for="(item,index) in data"><td align="center">{{ item.name }}</td><td align="center">{{ item.price }}</td><td align="center"><button @click="item.num>1 ? (item.num--, total()) : null">-</button>{{ item.num }}<button @click="item.num < 99 ? (item.num++, total()) : null">+</button></td><td align="center">{{ item.num * item.price }}</td><td align="center"><button @click="del(index)">del</button></td></tr></tbody><tfoot><tr><td colspan="5" align="right">总价:{{ $total }}</td></tr></tfoot></table></div>
</template><script setup lang="ts">
import { ref, reactive } from 'vue'
let $total = ref<number>(0)
interface Data {name: string,price: number,num: number,
}
let data = reactive<Data[]>([{name: '手机',price: 100,num: 1},{name: '电脑',price: 200,num: 2},{name: '笔记本',price: 300,num: 3}
])const total = () => {$total.value = data.reduce((prev:number, next: Data) => {return prev + next.num * next.price},0)
}
total()
const del = (index:number) => {data.splice(index, 1)total()}
</script><style lang="scss" scoped></style>

使用computed优化

<template><div><input v-model="keyWord" placeholder="搜索" type="text"></div><div style="margin-top: 20px"><table border width="600" cellpadding="0" cellspacing="0"><thead><tr><th>物品名称：</th><th>物品单价：</th><th>物品数量：</th><th>物品总价：</th><th>操作</th></tr></thead><tbody><tr v-for="(item, index) in searchData"><td align="center">{{ item.name }}</td><td align="center">{{ item.price }}</td><td align="center"><button @click="item.num > 1 ? item.num-- : null">-</button>{{ item.num }}<button@click="item.num < 99 ? item.num++ : null">+</button></td><td align="center">{{ item.num * item.price }}</td><td align="center"><button @click="del(index)">del</button></td></tr></tbody><tfoot><tr><td colspan="5" align="right">总价:{{ total }}</td></tr></tfoot></table></div>
</template><script setup lang="ts">
import { ref, reactive, computed } from 'vue'
let keyWord = ref<string>('')
interface Data {name: string,price: number,num: number,
}
let data = reactive<Data[]>([{name: '手机',price: 100,num: 1},{name: '电脑',price: 200,num: 2},{name: '笔记本',price: 300,num: 3}
])// const total = () => {
//   $total.value = data.reduce((prev:number, next: Data) => {
//     return prev + next.num * next.price
//   },0)
// }
const total = computed(() => {return data.reduce((prev: number, next: Data) => {return prev + next.num * next.price}, 0)
})const searchData = computed(() => {return data.filter((item: Data) => {return item.name.includes(keyWord.value)})
})
// 使用 searchData 搜索后的总价有bug，不会随 searchData 的数据改变（抽空再改啦~~）const del = (index: number) => {data.splice(index, 1)
}
</script><style lang="scss" scoped></style>