Vue3.0 性能优化

2025/8/24大约 9 分钟

Vue3.0 性能优化

性能优化概述

Vue3.0 在性能方面进行了全面优化，但作为开发者，我们仍然需要了解和应用各种性能优化策略。性能优化不仅仅是技术问题，更是用户体验和业务价值的关键因素。

性能优化的核心目标：

提升首屏加载速度
优化运行时性能
减少内存占用
提升用户交互响应性

编译时优化

1. 静态提升（Static Hoisting）

Vue3.0 编译器会自动识别模板中的静态内容，并将其提升到渲染函数外部，避免重复创建。

优化原理：

静态节点在组件初始化时创建一次
后续更新时直接复用，不参与 Diff 算法
减少虚拟 DOM 的创建和销毁

实际效果：

// 优化前：每次渲染都创建新的虚拟节点
function render() {
  return h('div', [
    h('h1', 'Static Title'),  // 每次都会创建
    h('p', 'Static content'), // 每次都会创建
    h('div', dynamicContent)  // 动态内容
  ])
}

// 优化后：静态内容被提升
const hoisted1 = h('h1', 'Static Title')    // 提升到外部
const hoisted2 = h('p', 'Static content')   // 提升到外部

function render() {
  return h('div', [
    hoisted1,                  // 直接复用
    hoisted2,                  // 直接复用
    h('div', dynamicContent)   // 动态内容
  ])
}

2. Patch Flag 优化

Vue3.0 为动态节点添加了 Patch Flag，标记节点的动态特性，优化 Diff 算法。

Patch Flag 类型：

// 常见的 Patch Flag
const PatchFlags = {
  TEXT: 1,        // 动态文本内容
  CLASS: 2,       // 动态 class
  STYLE: 4,       // 动态 style
  PROPS: 8,       // 动态 props
  FULL_PROPS: 16, // 有动态 key 的 props
  HYDRATE_EVENTS: 32, // 挂载了事件的节点
  STABLE_FRAGMENT: 64, // 稳定序列
  KEYED_FRAGMENT: 128, // 子节点有 key 的 fragment
  UNKEYED_FRAGMENT: 256, // 子节点没有 key 的 fragment
  NEED_PATCH: 512, // 需要 patch 的节点
  DYNAMIC_SLOTS: 1024, // 动态插槽
  HOISTED: -1, // 静态提升节点
  BAIL: -2 // 表示 diff 算法应该退出优化模式
}

优化效果：

// 模板
<div>
  <span>Static text</span>
  <span>{{ dynamicText }}</span>
  <span :class="dynamicClass">Content</span>
</div>

// 编译后的渲染函数
function render() {
  return h('div', [
    h('span', 'Static text'),                    // PatchFlag: HOISTED (-1)
    h('span', dynamicText, { PatchFlag: TEXT }), // PatchFlag: TEXT (1)
    h('span', { class: dynamicClass }, 'Content', { PatchFlag: CLASS }) // PatchFlag: CLASS (2)
  ])
}

3. Block Tree 优化

Block Tree 是 Vue3.0 的一个重要优化，它通过收集动态节点，减少虚拟 DOM 的遍历次数。

工作原理：

每个组件都有一个 Block 节点
Block 节点收集所有动态子节点
更新时只遍历动态节点，跳过静态节点

实际应用：

// 模板结构
<div>
  <header>Static Header</header>
  <main>
    <h1>{{ title }}</h1>
    <p>{{ content }}</p>
    <ul>
      <li v-for="item in items" :key="item.id">
        {{ item.name }}
      </li>
    </ul>
  </main>
  <footer>Static Footer</footer>
</div>

// Block Tree 结构
const block = {
  type: 'div',
  children: [
    // 静态节点不收集
    { type: 'header', children: 'Static Header' },
    // 动态节点收集到 Block 中
    { type: 'main', children: [
      { type: 'h1', children: title, PatchFlag: TEXT },
      { type: 'p', children: content, PatchFlag: TEXT },
      { type: 'ul', children: items.map(...), PatchFlag: KEYED_FRAGMENT }
    ]},
    { type: 'footer', children: 'Static Footer' }
  ],
  dynamicChildren: [
    // 只收集动态节点，更新时只遍历这些节点
    titleNode, contentNode, itemsListNode
  ]
}

运行时优化

1. 响应式系统优化

合理使用响应式 API：

// 避免过度响应式
// 不推荐：整个大对象都响应式
const largeObject = reactive({
  // 包含大量不需要响应式的数据
  metadata: { /* 大量元数据 */ },
  cache: { /* 缓存数据 */ },
  config: { /* 配置信息 */ }
})

// 推荐：只对需要响应的数据使用 reactive
const reactiveData = reactive({
  userInput: '',
  formData: {},
  validationErrors: {}
})

const staticData = {
  metadata: { /* 大量元数据 */ },
  cache: { /* 缓存数据 */ },
  config: { /* 配置信息 */ }
}

使用 shallowReactive 优化深层对象：

// 当只需要第一层响应式时
const formState = shallowReactive({
  user: {
    name: '',
    email: '',
    profile: {
      avatar: '',
      bio: ''
    }
  }
})

// 只有 user.name 和 user.email 变化会触发更新
// user.profile 的变化不会触发更新

2. 计算属性优化

合理使用计算属性缓存：

// 避免在模板中直接计算
// 不推荐
<template>
  <div>
    <p>Total: {{ items.reduce((sum, item) => sum + item.price, 0) }}</p>
    <p>Count: {{ items.filter(item => item.active).length }}</p>
  </div>
</template>

// 推荐：使用计算属性
const totalPrice = computed(() => {
  return items.value.reduce((sum, item) => sum + item.price, 0)
})

const activeCount = computed(() => {
  return items.value.filter(item => item.active).length
})

计算属性的依赖优化：

// 避免不必要的依赖
const expensiveValue = computed(() => {
  // 这个计算很昂贵，但依赖可能不经常变化
  return heavyCalculation(user.value.id, settings.value.theme)
})

// 优化：减少依赖
const expensiveValue = computed(() => {
  // 只依赖真正需要的值
  const userId = user.value?.id
  const theme = settings.value?.theme
  
  if (userId && theme) {
    return heavyCalculation(userId, theme)
  }
  return defaultValue
})

3. 监听器优化

合理使用 watch 选项：

// 使用 immediate 和 deep 选项时要谨慎
watch(data, callback, {
  immediate: true,  // 立即执行，但会增加初始化开销
  deep: true        // 深度监听，但会增加性能开销
})

// 优化：按需使用
watch(data, callback, {
  immediate: false,  // 只在数据变化时执行
  deep: false        // 只监听第一层变化
})

// 如果需要深度监听，考虑使用具体路径
watch(() => data.specificProperty, callback)

使用 watchEffect 的注意事项：

// watchEffect 会自动追踪所有依赖，要避免副作用
watchEffect(() => {
  // 避免在这里执行昂贵的操作
  console.log('Data changed:', data.value)
  
  // 避免在这里进行 DOM 操作
  document.title = `Count: ${count.value}`
})

组件优化

1. 组件懒加载

路由级别的懒加载：

// 路由配置
const routes = [
  {
    path: '/dashboard',
    component: () => import('./views/Dashboard.vue')
  },
  {
    path: '/user/:id',
    component: () => import('./views/UserDetail.vue')
  }
]

组件级别的懒加载：

// 使用 defineAsyncComponent
import { defineAsyncComponent } from 'vue'

const AsyncComponent = defineAsyncComponent({
  loader: () => import('./HeavyComponent.vue'),
  loadingComponent: LoadingSpinner,
  errorComponent: ErrorDisplay,
  delay: 200,
  timeout: 3000
})

2. 组件缓存

使用 KeepAlive 缓存组件：

<template>
  <router-view v-slot="{ Component, route }">
    <keep-alive :include="cachedComponents">
      <component :is="Component" :key="route.path" />
    </keep-alive>
  </router-view>
</template>

<script setup>
const cachedComponents = ['Dashboard', 'UserList', 'Settings']
</script>

动态控制缓存：

// 根据条件决定是否缓存
const shouldCache = computed(() => {
  return user.value?.role === 'admin' || route.meta.keepAlive
})

// 手动控制缓存
const cacheInstance = getCurrentInstance()
if (cacheInstance) {
  // 标记组件需要被缓存
  cacheInstance.ctx.activated = true
}

3. 组件渲染优化

使用 v-memo 优化列表渲染：

<template>
  <div>
    <div v-for="item in items" :key="item.id" v-memo="[item.id, item.status]">
      <h3>{{ item.title }}</h3>
      <p>{{ item.description }}</p>
      <span :class="item.status">{{ item.status }}</span>
    </div>
  </div>
</template>

使用 Teleport 优化渲染位置：

<template>
  <div>
    <!-- 主要内容 -->
    <main-content />
    
    <!-- 模态框传送到 body 下，避免嵌套层级过深 -->
    <teleport to="body">
      <modal v-if="showModal" @close="showModal = false" />
    </teleport>
  </div>
</template>

数据处理优化

1. 大数据渲染优化

虚拟滚动实现：

// 使用虚拟滚动处理大量数据
import { useVirtualList } from '@vueuse/core'

const { list, containerProps, wrapperProps } = useVirtualList(
  items,
  {
    itemHeight: 60,
    overscan: 10
  }
)

分页加载优化：

// 分页加载数据
const loadMore = async () => {
  if (loading.value || !hasMore.value) return
  
  loading.value = true
  try {
    const response = await fetchData({
      page: currentPage.value + 1,
      pageSize: 20
    })
    
    items.value.push(...response.data)
    currentPage.value++
    hasMore.value = response.hasMore
  } finally {
    loading.value = false
  }
}

2. 防抖和节流优化

搜索防抖：

import { debounce } from 'lodash-es'

const debouncedSearch = debounce(async (query) => {
  if (query.trim()) {
    const results = await searchAPI(query)
    searchResults.value = results
  }
}, 300)

// 在 watch 中使用
watch(searchQuery, debouncedSearch)

滚动节流：

import { throttle } from 'lodash-es'

const throttledScroll = throttle(() => {
  // 处理滚动事件
  updateScrollPosition()
}, 16) // 约 60fps

onMounted(() => {
  window.addEventListener('scroll', throttledScroll)
})

onUnmounted(() => {
  window.removeEventListener('scroll', throttledScroll)
})

内存管理优化

1. 事件监听器清理

及时清理事件监听器：

import { onMounted, onUnmounted } from 'vue'

let resizeHandler = null

onMounted(() => {
  resizeHandler = () => {
    // 处理窗口大小变化
    updateLayout()
  }
  
  window.addEventListener('resize', resizeHandler)
})

onUnmounted(() => {
  if (resizeHandler) {
    window.removeEventListener('resize', resizeHandler)
    resizeHandler = null
  }
})

2. 定时器清理

清理定时器：

let intervalId = null
let timeoutId = null

onMounted(() => {
  intervalId = setInterval(() => {
    updateTime()
  }, 1000)
  
  timeoutId = setTimeout(() => {
    showNotification()
  }, 5000)
})

onUnmounted(() => {
  if (intervalId) {
    clearInterval(intervalId)
    intervalId = null
  }
  
  if (timeoutId) {
    clearTimeout(timeoutId)
    timeoutId = null
  }
})

3. 第三方库清理

清理第三方库实例：

let chartInstance = null
let mapInstance = null

onMounted(() => {
  // 初始化图表
  chartInstance = new Chart(chartRef.value, chartOptions)
  
  // 初始化地图
  mapInstance = new Map(mapRef.value, mapOptions)
})

onUnmounted(() => {
  // 清理图表
  if (chartInstance) {
    chartInstance.destroy()
    chartInstance = null
  }
  
  // 清理地图
  if (mapInstance) {
    mapInstance.destroy()
    mapInstance = null
  }
})

性能监控与分析

1. 性能指标监控

核心 Web 指标：

// 监控 LCP (Largest Contentful Paint)
new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    console.log('LCP:', entry.startTime)
  }
}).observe({ entryTypes: ['largest-contentful-paint'] })

// 监控 FID (First Input Delay)
new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    console.log('FID:', entry.processingStart - entry.startTime)
  }
}).observe({ entryTypes: ['first-input'] })

// 监控 CLS (Cumulative Layout Shift)
new PerformanceObserver((entryList) => {
  let cls = 0
  for (const entry of entryList.getEntries()) {
    if (!entry.hadRecentInput) {
      cls += entry.value
    }
  }
  console.log('CLS:', cls)
}).observe({ entryTypes: ['layout-shift'] })

2. Vue 性能分析

使用 Vue DevTools 分析：

组件渲染时间
响应式数据变化
组件更新频率
内存使用情况

自定义性能标记：

// 在关键操作前后添加性能标记
const startTime = performance.now()

// 执行操作
performOperation()

const endTime = performance.now()
console.log(`Operation took ${endTime - startTime}ms`)

// 或者使用 Performance API
performance.mark('operation-start')
performOperation()
performance.mark('operation-end')
performance.measure('operation', 'operation-start', 'operation-end')