Fuse.js是一個(gè)功能強(qiáng)大、輕量級(jí)的模糊搜索庫，沒有依賴關(guān)系。

• 簡單代碼，實(shí)現(xiàn)模糊搜索、處理搜索，甚至不需要后端開發(fā)技術(shù)
• 數(shù)據(jù)量大的情況下表現(xiàn)優(yōu)秀，性能很好
• 無 DOM 依賴，既可以在前端使用，也支持在 node.js 后端使用
• 強(qiáng)大的搜索支持：不僅支持搜索字符串?dāng)?shù)組、對(duì)象數(shù)組，支持嵌套搜索、加權(quán)搜索等

使用步驟如下：

1、安裝fuse.js插件。

npm install --save fuse.js

2、在vue頁面中引入：

import Fuse from 'fuse.js'

3、在vue生命周期鉤子mounted或者在依賴發(fā)生改變時(shí)調(diào)用initFuse:

initFuse(list) {
  this.fuse = new Fuse(list, {
       shouldSort: true,
       threshold: 0.4,
       location: 0,
       distance: 100,
       maxPatternLength: 32,
       minMatchCharLength: 1,
       keys: [{
         name: 'title',
         weight: 0.7
       }, {
         name: 'path',
         weight: 0.3
       }]
  })

4、在需要模糊查詢時(shí)調(diào)用fuse.search：

querySearch(query) {
      if (query !== '') {
        this.options = this.fuse.search(query)
      } else {
        this.options = []
      }
}

配置項(xiàng)