代码详解

let name1 = ref('张')
let name2 = ref('三')
// 1.选项式写法，支持一个对象传入get函数以及set函数自定义操作
let name = computed<string>({
	get () {
		return name1.value + '-' + name2.value
	},
	set (newVal) {
		[name1.value, name2.value] = newVal.split('-')
	}
	
})
const changeName = () => {
	name.value = '李-四'
}
// 2.函数式写法，只能支持一个getter函数不允许修改值的
let name = computed (()=>name1.value + '-' + name2.value) 

实战用法

import {ref, reactive} from 'vue'
// let $total = ref<numnber>(0)
let keyWord = ref<string>('')
interface Data {
	name:string,
	price:number,
	num:number
}
let data = reactive<Data[]>([
	{
		name: '鞋子',
		price: 100,
		num: 1
	},
	{
		name: '帽子',
		price: 100,
		num: 1
	},
	{
		name: '衣服',
		price: 100,
		num: 1
	}
])
// 计算总价
// const total = () => {
//	data.reduce((prev:number, next: Data)=>{
//		return prve + next.num * next.price
//	}, 0)
// }
// total()
const total = computed(()=>{
	data.reduce((prev:number, next: Data)=>{
		return prve + next.num * next.price
	}, 0)
})
// 搜索
const searchData = computed(()=>{
	return data.filter((item:Data)=>{
		return item.name.includes(keyWord.value)
	})
})