一文分享5個Vue性能優(yōu)化的寫法

更新時間：2026年03月18日 14:54:29 作者：程序員大華

防抖和節(jié)流大家都用過,但 Vue性能優(yōu)化其實不止這兩種,所以這篇文章小編為大家整理了五大用的 vue 性能優(yōu)化寫法,希望對大家有一定的幫助

1. 避免模板中的重復計算

我以前喜歡直接在模板中寫一些計算邏輯，雖然它能快速實現(xiàn)需求，但如果不小心，可能會影響性能。尤其是當組件頻繁更新時，重復計算的開銷就會顯現(xiàn)出來。

基礎寫法

<template>
  <div v-for="item in list" :key="item.id">
    商品：{{ item.name }}
    價格：{{ formatPrice(item.price) }}
  </div>
</template>
<script setup>
import { ref } from "vue"
const list = ref([
  { id: 1, name: "鍵盤", price: 1999 },
  { id: 2, name: "鼠標", price: 299 },
  { id: 3, name: "顯示器", price: 3999 }
])
const formatPrice = (price) => {
  return "￥" + (price / 100).toFixed(2)
}
</script>

問題：每次渲染時，formatPrice 會重新計算，假如列表有幾百個條目，這個性能損耗就會變得明顯。

優(yōu)化寫法

可以使用 Vue3 的 computed 屬性，提前計算好需要的數(shù)據(jù)，避免每次都執(zhí)行復雜的計算。

<template>
  <div v-for="item in formattedList" :key="item.id">
    商品：{{ item.name }}
    價格：{{ item.priceText }}
  </div>
</template>
<script setup>
import { ref, computed } from "vue"
const list = ref([
  { id: 1, name: "鍵盤", price: 1999 },
  { id: 2, name: "鼠標", price: 299 },
  { id: 3, name: "顯示器", price: 3999 }
])
const formattedList = computed(() => {
  return list.value.map(item => ({
    ...item,
    priceText: "￥" + (item.price / 100).toFixed(2)
  }))
})
</script>

優(yōu)化效果：只有 list 數(shù)據(jù)發(fā)生變化時，formattedList 才會重新計算，避免了每次渲染時都重新格式化價格，提升了性能。

2. 合理使用 v-if 和 v-show

在 Vue3 中，v-if 和 v-show 都可以控制組件或元素的顯示，但如果用得不對，也會影響性能。

場景示例

假設有一個選項卡組件，用戶頻繁切換內容：

<template>
  <button @click="tab = 1">Tab 1</button>
  <button @click="tab = 2">Tab 2</button>

  <div v-if="tab === 1">內容 1</div>
  <div v-if="tab === 2">內容 2</div>
</template>

<script setup>
import { ref } from "vue"
const tab = ref(1)
</script>

問題：每次切換 tab 時，v-if 都會銷毀和重建對應 DOM，如果內容復雜或包含子組件，性能開銷明顯。

優(yōu)化寫法：使用v-show

<template>
  <button @click="tab = 1">Tab 1</button>
  <button @click="tab = 2">Tab 2</button>

  <div v-show="tab === 1">內容 1</div>
  <div v-show="tab === 2">內容 2</div>
</template>

優(yōu)化效果：v-show 只是切換元素的 CSS display，不會頻繁銷毀和重建 DOM，適合頻繁切換但數(shù)量有限的場景。

如果是初次渲染開銷大、切換不頻繁，用 v-if；如果是頻繁切換，用 v-show。合理選擇可以明顯提高性能。

3. 懶加載：先渲染用戶可見部分

懶加載是一種非常有效的技術，可以讓頁面內容只有在用戶滾動到該部分時才加載，提升首屏加載速度，減少不必要的請求。

基礎寫法

<template>
  <img :src="imageSrc" />
</template>

<script setup>
const imageSrc = "https://example.com/large-image.jpg"
</script>

問題：直接在組件加載時就請求了圖片，導致首屏加載時間增加。

優(yōu)化寫法：圖片懶加載

<template>
  <img v-lazy="imageSrc" />
</template>

<script setup>
import { ref } from "vue"
import { useIntersectionObserver } from "@vueuse/core"

const imageSrc = ref("https://example.com/large-image.jpg")

// 使用 @vueuse/core 的 useIntersectionObserver 來懶加載圖片
useIntersectionObserver(imageRef, () => {
  imageRef.src = imageSrc.value
})
</script>

優(yōu)化效果：只有當圖片進入視口時才會開始加載，減少了首屏的資源加載，提高頁面加載速度。

4. 避免過度使用 watch

在 Vue 中，watch 是監(jiān)聽數(shù)據(jù)變化的常用方式，但如果用得不當，會導致多次不必要的計算和請求，增加性能開銷。

基礎寫法

<template>
  <input v-model="searchQuery" placeholder="搜索" />
</template>

<script setup>
import { ref, watch } from "vue"

const searchQuery = ref("")

watch(searchQuery, (newQuery) => {
  // 每次輸入都會發(fā)請求
  fetch(`/api/search?q=${newQuery}`)
})
</script>

問題：每次 searchQuery 變化時都會觸發(fā)請求，尤其是輸入法彈出時，會多次觸發(fā)請求。

優(yōu)化寫法：使用防抖

<template>
  <input v-model="searchQuery" placeholder="搜索" />
</template>

<script setup>
import { ref, watch } from "vue"

const searchQuery = ref("")
let timeout

watch(searchQuery, (newQuery) => {
  clearTimeout(timeout)
  timeout = setTimeout(() => {
    fetch(`/api/search?q=${newQuery}`)
  }, 500) // 防抖：500ms后才發(fā)送請求
})
</script>

優(yōu)化效果：只有在用戶停止輸入 500 毫秒后才會發(fā)起請求，避免了過于頻繁的請求。

5. 避免重復綁定事件

在 Vue3 中，每次渲染組件時，都會重新綁定事件。如果綁定事件的元素很多，性能開銷就會加大，尤其是在動態(tài)生成的列表中。

基礎寫法

<template>
  <div v-for="item in list" :key="item.id">
    <button @click="handleClick(item.id)">點擊</button>
  </div>
</template>

<script setup>
const handleClick = (id) => {
  console.log("點擊按鈕", id)
}
</script>

問題：每個 button 都會綁定一個新的事件處理函數(shù)，造成不必要的內存開銷。

優(yōu)化寫法：事件委托

<template>
  <div @click="handleClick">
    <div v-for="item in list" :key="item.id">
      <button>{{ item.name }}</button>
    </div>
  </div>
</template>

<script setup>
const handleClick = (e) => {
  if (e.target.tagName === 'BUTTON') {
    console.log('點擊按鈕', e.target.innerText)
  }
}
</script>

優(yōu)化效果：通過事件委托，將事件綁定到父元素上，避免了為每個按鈕都單獨綁定事件，大大減少了內存開銷。

到此這篇關于一文分享5個Vue性能優(yōu)化的寫法的文章就介紹到這了,更多相關Vue性能優(yōu)化內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: