Vue 3 计算属性的应用

1.基本用法

<script setup>
import { ref, computed } from 'vue'const firstName = ref('张')
const lastName = ref('三')// 计算属性
const fullName = computed(() => {return firstName.value + lastName.value
})
</script><template><div>全名: {{ fullName }}</div>
</template>

2.Vue 3 允许创建可写的计算属性

<script setup>
import { ref, computed } from 'vue'const firstName = ref('张')
const lastName = ref('三')const fullName = computed({// getterget() {return firstName.value + lastName.value},// setterset(newValue) {// 假设新格式是"姓 名"[firstName.value, lastName.value] = newValue.split(' ')}
})function changeName() {fullName.value = '李 四'
}
</script><template><div>全名: {{ fullName }}</div><button @click="changeName">改为李四</button>
</template>

3.在列表过滤和排序中的应用

<script setup>
import { ref, computed } from 'vue'const searchQuery = ref('')
const sortDirection = ref('asc')const items = ref([{ id: 1, name: 'Apple', price: 5 },{ id: 2, name: 'Banana', price: 3 },{ id: 3, name: 'Orange', price: 4 },{ id: 4, name: 'Pear', price: 6 }
])// 过滤和排序后的列表
const filteredAndSortedItems = computed(() => {let result = [...items.value]// 过滤if (searchQuery.value) {result = result.filter(item => item.name.toLowerCase().includes(searchQuery.value.toLowerCase()))}// 排序if (sortDirection.value === 'asc') {result.sort((a, b) => a.price - b.price)} else {result.sort((a, b) => b.price - a.price)}return result
})function toggleSort() {sortDirection.value = sortDirection.value === 'asc' ? 'desc' : 'asc'
}
</script><template><input v-model="searchQuery" placeholder="搜索商品..."><button @click="toggleSort">排序: {{ sortDirection === 'asc' ? '价格升序' : '价格降序' }}</button><ul><li v-for="item in filteredAndSortedItems" :key="item.id">{{ item.name }} - ￥{{ item.price }}</li></ul>
</template>