【Vue实践】列表搜索框中模糊搜索功能的两种实现方式

1、Demo演示

模糊搜索功能是日常开发中常见的一种功能，这里用两种方式进行模拟实现。

2、HTML结构

<template>
  <div>
    <div><input type="text" v-model="keyWord"></div>
    <ul>
      <li  v-for="fruit in filterFruitList" :key="fruit.id">{{fruit.name}}</li>
      </ul>
  </div>
</template>

为简单起见，HTML结构仅包含一个搜索框和一个列表。

3、实现

3.1 基于计算属性computed实现

export default {
  name: 'Computed',
  data() {
    return {
      keyWord: '',
      fruitList: [
        {
          "id": 1,
          "name": '香蕉'
        },
        {
          "id": 2,
          "name": '水蜜桃'
        },
        {
          "id": 3,
          "name": '香瓜'
        },
        {
          "id": 4,
          "name": '西瓜'
        },
        {
          "id": 5,
          "name": '哈密瓜'
        }
      ]
    }
  },
  computed: {
    filterFruitList() {
      return this.fruitList.filter((item) => {
        return item.name.indexOf(this.keyWord) !== -1;
      })
    }
  }
}
</script>

computed的实现方式很简洁，主要借助一个计算属性，在计算属性中通过搜索关键词过滤原始列表数据得到新的数据列表，并将新数据列表渲染到页面。

值得注意的地方：
abc.indexOf('a')的返回值是0，而abc.indexOf('')的返回值也是0。

因此，在一开始没有输入任何数据的时候，计算属性列表filterFruitList中经过计算得到的数据和原始列表数据fruitList是一样的。

3.2 基于侦听器watch实现

<script>
export default {
  name: 'Computed',
  data() {
    return {
      keyWord: '',
      fruitList: [
        {
          "id": 1,
          "name": '香蕉'
        },
        {
          "id": 2,
          "name": '水蜜桃'
        },
        {
          "id": 3,
          "name": '香瓜'
        },
        {
          "id": 4,
          "name": '西瓜'
        },
        {
          "id": 5,
          "name": '哈密瓜'
        }
      ],
      filterFruitList: []
    }
  },
  watch: {
    keyWord: {
      immediate: true,
      handler(val) {
        this.filterFruitList = this.fruitList.filter((item) => {
          return item.name.indexOf(val) !== -1;
        })
      }
    }
    
  }
}
</script>

使用watch实现需要注意的地方：

• 需要事先准备一个值为空的属性filterFruitList。
• 在watch实现中，keyWord中详细配置immediate的值要设置为true，就相当于，在输入框首次没有输入任何数据时，立即执行一次，将filterFruitList 的值初始化为fruitList中的值。

注意： 不论是computed，还是watch的实现方式，都没有对原始数据fruitList进行修改或者破坏。这也是一个比较重要的点。