Vue模糊查詢詳解

一、Vue模糊查詢原理

Vue模糊查詢，顧名思義就是根據用戶輸入的關鍵字，匹配一組數據中想要查找的內容，最後將其渲染至頁面中。Vue提供的v-model指令，能夠實時監聽用戶輸入，並將輸入的內容綁定至Vue實例的data中。而對於頁面上的數據展示，便可以使用Vue提供的過濾器進行處理。在過濾器中，我們可以自定義匹配規則，通過正則表達式或其他方式匹配用戶輸入，篩選出需要展示的數據。

以下是一個簡單的實現示例，實現的功能是當用戶輸入關鍵字時，列表中展示能夠匹配該關鍵字的元素：

<div id="app">
  <input type="text" v-model="searchKeyword">
  <ul>
    <li v-for="item in filterData" :key="item">{{ item }}</li>
  </ul>
</div>

<script>
  const app = new Vue({
    el: '#app',
    data: {
      searchKeyword: '',
      data: ['apple', 'banana', 'orange', 'pear']
    },
    computed: {
      filterData() {
        const regx = new RegExp(this.searchKeyword, 'i')
        return this.data.filter(item => regx.test(item))
      }
    }
  })
</script>

在上述代碼中，我們使用v-model指令來雙向綁定用戶的輸入值searchKeyword，並通過computed屬性來計算篩選出的數據，最後將其展示在ul元素中。

二、Vue模糊查詢注意事項

1、數據量過大時性能問題

在數據量較小的情況下，這種基於computed計算的過濾方案是完全可行的，但是當數據量過大時，計算量就會變得非常大，從而導致頁面的性能問題。例如，我們如果有10000條數據，用戶每輸入一個字元都會重新計算一次結果，這意味著每次都需要重新將10000條數據再次遍歷一遍並計算，這無疑會導致頁面的卡頓和性能的降低。為了解決這個問題，我們可以採用減少數據計算量的方式，例如在用戶輸入時加上延時等手段來優化。

2、過濾器中不建議使用非同步操作

在Vue的過濾器中，不建議使用非同步操作，例如使用axios請求介面等，因為這樣不僅會降低頁面的渲染速度，還會使得頁面的渲染變得不可預測。可以將非同步請求的操作放在mounted或者created中，然後將請求到的數據綁定至Vue實例的data中。

3、過濾器中可以進行複雜的數據轉換操作

除了基本的過濾操作，過濾器中還可以進行複雜的數據轉換操作，例如將數據中的某個欄位轉換成大寫或者通過組合不同欄位生成新的欄位等。但是，建議不要在過濾器中進行過於複雜的操作，這樣不僅會使得代碼難以維護，還有可能引發性能問題。

三、Vue模糊查詢實戰

現在，我們可以基於Vue模糊查詢的原理和注意事項，來實現一個真實的案例。以下是一個簡單的電商網站搜索頁面，用戶輸入關鍵字後可以實時篩選出匹配的商品列表：

<div id="app">
  <h3>商品列表</h3>
  <input type="text" v-model="searchKeyword">

  <ul>
    <li v-for="item in filteredList" :key="item.id">
      <img :src="item.img" alt="{{item.name}}">
      <div class="product-info">
        <p class="product-name">{{item.name}}</p>
        <p class="product-price">{{item.price}}</p>
      </div>
    </li>
  </ul>
</div>

<script>
  const products = [
    { id: 1, name: 'Product A', price: 99.9, img: 'https://cdn.store.com/product-a.jpg' },
    { id: 2, name: 'Product B', price: 188.8, img: 'https://cdn.store.com/product-b.jpg' },
    { id: 3, name: 'Product C', price: 299, img: 'https://cdn.store.com/product-c.jpg' },
    { id: 4, name: 'Product D', price: 888, img: 'https://cdn.store.com/product-d.jpg' },
    { id: 5, name: 'Product E', price: 99.9, img: 'https://cdn.store.com/product-e.jpg' },
    { id: 6, name: 'Product F', price: 188.8, img: 'https://cdn.store.com/product-f.jpg' },
    { id: 7, name: 'Product G', price: 299, img: 'https://cdn.store.com/product-g.jpg' },
    { id: 8, name: 'Product H', price: 888, img: 'https://cdn.store.com/product-h.jpg' }
  ]

  const app = new Vue({
    el: '#app',
    data: {
      searchKeyword: '',
      productList: products
    },
    computed: {
      filteredList() {
        const regx = new RegExp(this.searchKeyword, 'i')
        return this.productList.filter(item => regx.test(item.name) || regx.test(item.price))
      }
    }
  })
</script>

在上述代碼中，我們通過v-model綁定了用戶輸入的值searchKeyword，並通過computed計算出匹配的商品列表。對於匹配規則，我們採用了正則表達式的方式，匹配商品名稱或者價格是否包含用戶輸入的關鍵字。

四、總結

Vue模糊查詢是一個常見且非常實用的功能，能夠為用戶提供更加便捷的體驗，同時也可以提升頁面的交互性和動態性。然而開發者需要注意的是，在使用模糊查詢時，需要注意頁面性能問題，避免過度計算數據，同時加入必要的優化手段。除此之外，對於過濾器中進行的數據轉換操作，也需要控制好操作的複雜度，避免代碼難以維護和影響性能。