一文分享5个Vue性能优化的写法

更新时间：2026年03月18日 14:54:29 作者：程序员大华

防抖和节流大家都用过,但 Vue性能优化其实不止这两种,所以这篇文章小编为大家整理了五大用的 vue 性能优化写法,希望对大家有一定的帮助

1. 避免模板中的重复计算

我以前喜欢直接在模板中写一些计算逻辑，虽然它能快速实现需求，但如果不小心，可能会影响性能。尤其是当组件频繁更新时，重复计算的开销就会显现出来。

基础写法

<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 会重新计算，假如列表有几百个条目，这个性能损耗就会变得明显。

优化写法

可以使用 Vue3 的 computed 属性，提前计算好需要的数据，避免每次都执行复杂的计算。

<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>

优化效果：只有 list 数据发生变化时，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，如果内容复杂或包含子组件，性能开销明显。

优化写法：使用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>

优化效果：v-show 只是切换元素的 CSS display，不会频繁销毁和重建 DOM，适合频繁切换但数量有限的场景。

如果是初次渲染开销大、切换不频繁，用 v-if；如果是频繁切换，用 v-show。合理选择可以明显提高性能。

3. 懒加载：先渲染用户可见部分

懒加载是一种非常有效的技术，可以让页面内容只有在用户滚动到该部分时才加载，提升首屏加载速度，减少不必要的请求。

基础写法

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

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

问题：直接在组件加载时就请求了图片，导致首屏加载时间增加。

优化写法：图片懒加载

<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>

优化效果：只有当图片进入视口时才会开始加载，减少了首屏的资源加载，提高页面加载速度。

4. 避免过度使用 watch

在 Vue 中，watch 是监听数据变化的常用方式，但如果用得不当，会导致多次不必要的计算和请求，增加性能开销。

基础写法

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

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

const searchQuery = ref("")

watch(searchQuery, (newQuery) => {
  // 每次输入都会发请求
  fetch(`/api/search?q=${newQuery}`)
})
</script>

问题：每次 searchQuery 变化时都会触发请求，尤其是输入法弹出时，会多次触发请求。

优化写法：使用防抖

<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后才发送请求
})
</script>

优化效果：只有在用户停止输入 500 毫秒后才会发起请求，避免了过于频繁的请求。

5. 避免重复绑定事件

在 Vue3 中，每次渲染组件时，都会重新绑定事件。如果绑定事件的元素很多，性能开销就会加大，尤其是在动态生成的列表中。

基础写法

<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 都会绑定一个新的事件处理函数，造成不必要的内存开销。

优化写法：事件委托

<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>

优化效果：通过事件委托，将事件绑定到父元素上，避免了为每个按钮都单独绑定事件，大大减少了内存开销。

到此这篇关于一文分享5个Vue性能优化的写法的文章就介绍到这了,更多相关Vue性能优化内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

vue-cli创建vue项目的详细步骤记录
vue.cli是vue中的项目构造工具,是一个npm包,需要安装node.js和 git才能用,下面这篇文章主要给大家介绍了关于利用vue-cli创建vue项目的详细步骤,需要的朋友可以参考下
2022-06-06
基于el-tree实现懒加载穿梭条的示例代码
这篇文章主要介绍了基于el-tree实现懒加载穿梭条的示例代码,本文通过示例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
2024-03-03
electron+vue3实现自动更新的示例代码
本文主要介绍了electron+vue3实现自动更新的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
2025-10-10
使用el-upload组件实现递归多文件上传的全过程
el-upload组件文件上传都是每个文件请求一次接口,本次实现一次请求上传多个文件,下面这篇文章主要给大家介绍了关于使用el-upload组件实现递归多文件上传的相关资料,需要的朋友可以参考下
2023-03-03
Vue如何实现自动触发功能
这篇文章主要介绍了Vue如何实现自动触发功能，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-01-01
vue中前端如何实现pdf预览功能(含vue-pdf插件用法)
这篇文章主要给大家介绍了vue中前端如何实现pdf预览功能的相关资料,文中包含vue-pdf插件用法,在前端开发中,很多时候我们需要进行pdf文件的预览操作,需要的朋友可以参考下
2023-07-07
vue.config.js配置proxy代理产生404错误的原因及解决
这篇文章主要介绍了vue.config.js配置proxy代理产生404错误的原因及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-06-06
Vue如何引入远程JS文件
本篇文章主要介绍了Vue引入远程JS文件，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-04-04
Vue实例中el和data的两种写法小结
这篇文章主要介绍了Vue实例中el和data的两种写法,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2023-11-11
vue混入mixin使用特点
混入(mixin)提供了一种非常灵活的方式，来分发vue组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项
2022-12-12