Vue開發規範：如何優化網頁搜索體驗

一、SEO優化

SEO是指搜索引擎優化，旨在提升網站的自然排名。Vue開發規範中，應當注重以下幾點：

1、使用合適的HTML標籤：合適的HTML標籤能夠提高網站的可讀性和頁面權重，利於搜索引擎收錄和SEO優化。如需強調標題，應當使用h1~h6標籤，並保證每個頁面都只出現一個h1標籤；如需展示列表，應當使用ul、ol等列表標籤。

<h1>文章標題</h1>
<ul>
  <li>列表項1</li>
  <li>列表項2</li>
</ul>

2、關鍵字密度控制：關鍵字密度是指某個關鍵字出現的頻率。雖然過度的關鍵字堆積會造成反效果，但是適當的關鍵字密度能夠提高該關鍵字的權重，增加網站的排名。

<meta name="keywords" content="關鍵字1,關鍵字2">

3、圖片優化：在Vue中引入圖片時，應當給圖片加上alt屬性和title屬性，這不僅有利於SEO優化，還有助於網站的無障礙體驗。

<img src="圖片路徑" alt="圖片描述" title="圖片標題">

二、懶加載

懶加載是指延遲加載一些不必要的資源，從而使頁面加載時間更短。Vue中實現懶加載的方式有多種，下面是其中一種：

Vue.directive('lazy', {
  bind: function (el, binding) {
    const lazyImage = new IntersectionObserver(function(entries, observer) {
      entries.forEach(function(entry) {
        if (entry.isIntersecting) {
          el.setAttribute('src', binding.value);
          observer.unobserve(el);
        }
      });
    });
    lazyImage.observe(el);
  }
});
<img v-lazy="圖片路徑">

使用IntersectionObserver API，監聽元素區域與視口區域的交叉情況，只有當元素進入視口時才會加載。

三、自動完成

自動完成能夠提高搜索的準確性和效率，Vue中實現自動完成的方式有多種，下面是其中一種：

<template>
  <div>
    <input v-model="searchValue" @input="search" />
    <ul v-show="searchResult">
      <li v-for="item in searchResult" @click="select(item)"></li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      searchValue: '',
      searchResult: [],
      searchList: ['搜索項1', '搜索項2']
    };
  },
  methods: {
    search() {
      this.searchResult = this.searchList.filter(item => {
        return item.includes(this.searchValue);
      });
    },
    select(item) {
      this.searchValue = item;
      this.searchResult = [];
    }
  }
};
</script>

當輸入框中的值發生變化時，根據輸入值過濾搜索列表並展示搜索結果。當用戶點擊某個搜索結果時，將結果填入輸入框中。

四、分頁

當搜索結果較多時，考慮對搜索結果進行分頁展示，提高網頁的可讀性和用戶體驗。Vue中實現分頁有多種方式，下面是其中一種：

<template>
  <div>
    <ul>
      <li v-for="item in currentPageData"></li>
    </ul>
    <nav v-show="totalPage">
      <a @click="currentPage--;getPageData(currentPage);" :disabled="currentPage===1">上一頁</a>
      <span>{{currentPage}}/{{totalPage}}</span>
      <a @click="currentPage++;getPageData(currentPage);" :disabled="currentPage===totalPage">下一頁</a>
    </nav>
  </div>
</template>
<script>
export default {
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      totalPage: 0,
      totalData: [],
      currentPageData: []
    };
  },
  methods: {
    getPageData(page) {
      this.currentPageData = this.totalData.slice(
        (page - 1) * this.pageSize,
        page * this.pageSize
      );
    }
  },
  watch: {
    totalData(val) {
      this.totalPage = Math.ceil(val.length / this.pageSize);
      this.getPageData(this.currentPage);
    }
  }
};
</script>

通過計算總數據的長度和每頁數據的長度，計算出總頁數和展示頁碼。當頁碼發生變化時，重新計算展示的數據。

五、關鍵字高亮

為關鍵字在搜索結果中設置高亮樣式，提高用戶查看搜索結果的效率。Vue中實現關鍵字高亮的方式如下：

<template>
  <div>
    <ul>
      <li v-for="item in searchResult">
        <span v-html="highlight(item)"/>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      searchValue: '',
      searchResult: [],
      searchList: ['搜索項1', '搜索項2']
    };
  },
  methods: {
    highlight(str) {
      return str.replace(
        new RegExp(this.searchValue, 'gi'),
        '$</span>'
      );
    },
    search() {
      this.searchResult = this.searchList.filter(item => {
        return item.includes(this.searchValue);
      });
    }
  }
};
</script>
<style scoped>
  .highlight {
    background-color: yellow;
  }
</style>

使用正則表達式搜索關鍵字，並在搜索結果字符串中加上高亮樣式。