alex's blog
Go back

Vue3 性能优化技巧与实践

编辑页面

性能优化是前端开发中永恒的话题。Vue3 在性能方面已经有了很大的提升，但通过合理的优化技巧，我们可以让应用运行得更快、更流畅。本文将分享一些实用的 Vue3 性能优化技巧。

1. 组件懒加载

对于大型应用，使用路由懒加载和组件懒加载可以显著减少初始加载时间：

// 路由懒加载
import { createRouter, createWebHistory } from 'vue-router'

const routes = [
  {
    path: '/home',
    component: () => import('./views/Home.vue') // 懒加载
  },
  {
    path: '/about',
    component: () => import('./views/About.vue')
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})
<!-- 组件懒加载 -->
<template>
  <div>
    <Suspense>
      <template #default>
        <AsyncComponent />
      </template>
      <template #fallback>
        <div>Loading...</div>
      </template>
    </Suspense>
  </div>
</template>

<script setup>
import { defineAsyncComponent } from 'vue'

const AsyncComponent = defineAsyncComponent(() => 
  import('./components/HeavyComponent.vue')
)
</script>

2. 使用 v-memo 优化列表渲染

Vue3.2 引入了 v-memo，可以缓存模板的一部分，避免不必要的重新渲染：

<template>
  <div v-for="item in list" :key="item.id" v-memo="[item.id, item.name]">
    <p>{{ item.name }}</p>
    <p>{{ item.description }}</p>
  </div>
</template>

只有当 item.id 或 item.name 改变时，才会重新渲染该元素。

3. 合理使用 v-once

对于不会改变的内容，使用 v-once 可以跳过更新：

<template>
  <div>
    <h1 v-once>{{ title }}</h1> <!-- 只渲染一次 -->
    <p>{{ dynamicContent }}</p>
  </div>
</template>

4. 优化响应式数据

使用 shallowRef 和 shallowReactive

对于不需要深度响应式的大对象，使用浅层响应式：

import { shallowRef, shallowReactive } from 'vue'

// 大列表数据
const largeList = shallowRef([
  // 大量数据
])

// 配置对象
const config = shallowReactive({
  // 配置项
})

使用 markRaw 标记非响应式数据

import { markRaw, reactive } from 'vue'

const chart = markRaw(new Chart(...))
const state = reactive({
  chart // chart 不会被转换为响应式
})

5. 虚拟滚动

对于长列表，使用虚拟滚动可以显著提升性能：

<template>
  <VirtualList
    :data="items"
    :item-height="50"
    :container-height="400"
  >
    <template #default="{ item }">
      <div>{{ item.name }}</div>
    </template>
  </VirtualList>
</template>

<script setup>
import { ref } from 'vue'
import VirtualList from './components/VirtualList.vue'

const items = ref([
  // 大量数据
])
</script>

6. 使用 computed 缓存计算结果

避免在模板中进行复杂计算：

<!-- ❌ 不推荐：每次渲染都会计算 -->
<template>
  <div>{{ expensiveCalculation() }}</div>
</template>

<script setup>
function expensiveCalculation() {
  // 复杂计算
  return result
}
</script>
<!-- ✅ 推荐：使用 computed 缓存 -->
<template>
  <div>{{ computedResult }}</div>
</template>

<script setup>
import { computed } from 'vue'

const computedResult = computed(() => {
  // 复杂计算，结果会被缓存
  return result
})
</script>

7. 避免在模板中使用复杂表达式

<!-- ❌ 不推荐 -->
<template>
  <div>{{ user.profile?.address?.city?.toUpperCase() }}</div>
</template>
<!-- ✅ 推荐 -->
<template>
  <div>{{ cityName }}</div>
</template>

<script setup>
import { computed } from 'vue'

const cityName = computed(() => {
  return user.value.profile?.address?.city?.toUpperCase() || ''
})
</script>

8. 使用 Teleport 优化 DOM 结构

使用 Teleport 可以将组件渲染到 DOM 的其他位置，避免深层嵌套：

<template>
  <div>
    <button @click="showModal = true">打开弹窗</button>
    <Teleport to="body">
      <Modal v-if="showModal" @close="showModal = false" />
    </Teleport>
  </div>
</template>

9. 优化事件处理

使用事件修饰符

<!-- 使用 .passive 提升滚动性能 -->
<div @scroll.passive="handleScroll">
  <!-- 内容 -->
</div>

防抖和节流

import { ref } from 'vue'
import { debounce, throttle } from 'lodash-es'

const searchQuery = ref('')

// 防抖搜索
const debouncedSearch = debounce((query) => {
  // 搜索逻辑
}, 300)

// 节流滚动
const throttledScroll = throttle(() => {
  // 滚动处理
}, 100)

10. 使用 KeepAlive 缓存组件

对于频繁切换的组件，使用 KeepAlive 可以避免重复创建和销毁：

<template>
  <KeepAlive :include="['Home', 'About']">
    <component :is="currentComponent" />
  </KeepAlive>
</template>

11. 优化图片加载

<template>
  <!-- 使用懒加载 -->
  <img v-lazy="imageUrl" alt="description" />
  
  <!-- 使用响应式图片 -->
  <picture>
    <source media="(min-width: 800px)" :srcset="largeImage" />
    <source media="(min-width: 400px)" :srcset="mediumImage" />
    <img :src="smallImage" alt="description" />
  </picture>
</template>

12. 使用 Tree-shaking

确保只导入需要的功能：

// ❌ 不推荐：导入整个库
import _ from 'lodash'

// ✅ 推荐：按需导入
import { debounce, throttle } from 'lodash-es'

13. 代码分割和预加载

// 预加载关键路由
router.beforeEach((to, from, next) => {
  if (to.matched.length === 0) {
    import(`./views/${to.name}.vue`).then(() => {
      next()
    })
  } else {
    next()
  }
})

14. 使用生产构建

确保在生产环境使用生产构建：

// vite.config.js
export default {
  build: {
    minify: 'terser',
    terserOptions: {
      compress: {
        drop_console: true, // 移除 console
        drop_debugger: true // 移除 debugger
      }
    }
  }
}

15. 性能监控

使用 Vue DevTools 和性能分析工具：

// 性能监控
import { onMounted, onUnmounted } from 'vue'

export function usePerformanceMonitor() {
  onMounted(() => {
    if (process.env.NODE_ENV === 'development') {
      // 性能监控逻辑
      console.time('component-render')
    }
  })
  
  onUnmounted(() => {
    if (process.env.NODE_ENV === 'development') {
      console.timeEnd('component-render')
    }
  })
}

最佳实践总结

  1. 按需加载：使用路由和组件懒加载
  2. 缓存优化：合理使用 computed、v-memo、v-once
  3. 响应式优化：使用 shallowRef、shallowReactive、markRaw
  4. 列表优化：长列表使用虚拟滚动
  5. 事件优化：使用防抖、节流和事件修饰符
  6. 组件缓存：使用 KeepAlive 缓存组件
  7. 构建优化：使用生产构建，启用 Tree-shaking

性能测试工具

总结

性能优化是一个持续的过程，需要根据实际项目情况选择合适的优化策略。记住：

  1. 先测量，再优化：使用性能分析工具找出瓶颈
  2. 避免过度优化：不要为了优化而优化
  3. 关注用户体验：性能优化的最终目标是提升用户体验

希望这些技巧能帮助你的 Vue3 应用运行得更快、更流畅！

性能优化需要结合实际项目情况，建议在开发过程中持续关注和优化。如果你有更好的优化技巧，欢迎分享！

编辑页面
Share this post on:
Share this post via WhatsApp Share this post via email
Previous Post
Vue3 虚拟列表实现原理与实践
Next Post
Vue3 响应式系统深度解析