《Vue3 Composition API 实战：开发一个带筛选功能的列表组件》

Vue3 Composition API 实战：带筛选功能的列表组件开发指南

核心功能设计

1. 响应式数据管理：使用ref管理筛选关键词
2. 动态列表计算：通过computed实现实时筛选
3. 组件结构：
   • 搜索输入框
   • 列表展示区
   • 空状态提示

代码实现

<template>
  <div class="list-container">
    <!-- 搜索框 -->
    <input 
      type="text" 
      v-model="searchKeyword"
      placeholder="输入筛选关键词"
      class="search-input"
    >
    
    <!-- 列表展示 -->
    <ul v-if="filteredList.length">
      <li v-for="(item, index) in filteredList" :key="index">
        {{ item.name }}
      </li>
    </ul>
    
    <!-- 空状态提示 -->
    <div v-else class="empty-tip">
      没有匹配的项目
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

// 原始数据源
const items = ref([
  { id: 1, name: 'Vue3 文档' },
  { id: 2, name: 'React 教程' },
  { id: 3, name: 'JavaScript 高级编程' },
  { id: 4, name: 'CSS 揭秘' }
])

// 搜索关键词
const searchKeyword = ref('')

// 过滤后的列表
const filteredList = computed(() => {
  if (!searchKeyword.value) return items.value
  const keyword = searchKeyword.value.toLowerCase()
  return items.value.filter(item => 
    item.name.toLowerCase().includes(keyword)
  )
})
</script>

<style scoped>
.search-input {
  padding: 8px 12px;
  margin-bottom: 16px;
  width: 100%;
  box-sizing: border-box;
}
.empty-tip {
  color: #888;
  text-align: center;
  padding: 20px;
}
</style>

关键功能解析

1. 响应式绑定：

   const searchKeyword = ref('') // 创建响应式变量
   v-model="searchKeyword"       // 实现双向绑定
   

2. 动态筛选逻辑：

   const filteredList = computed(() => {
     return items.value.filter(item => 
       item.name.includes(searchKeyword.value)
     )
   })
   

3. 空状态处理：

   <div v-else class="empty-tip">没有匹配的项目</div>
   

功能扩展建议

1. 多字段筛选：

   // 增加筛选字段选择
   const searchFields = ref(['name', 'description'])
   

2. 异步数据加载：

   import { onMounted } from 'vue'
   
   onMounted(async () => {
     const res = await fetch('/api/items')
     items.value = await res.json()
   })
   

3. 筛选动画效果：

   <transition-group name="list">
     <li v-for="item in filteredList" :key="item.id">
       {{ item.name }}
     </li>
   </transition-group>
   

性能优化技巧

1. 使用debounce减少频繁计算
2. 复杂数据源采用shallowRef
3. 大数据量使用虚拟滚动

最佳实践提示：将筛选逻辑提取到独立组合函数中，可实现跨组件复用：

// useListFilter.js
export function useListFilter(items, field = 'name') {
  const searchKeyword = ref('')
  const filteredList = computed(() => {
    // 筛选逻辑
  })
  return { searchKeyword, filteredList }
}