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({
  // getter
  get() {
    return firstName.value + lastName.value
  },
  // setter
  set(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>