响应式性能最佳实践

响应式系统是 Vue.js 的核心特性之一，但不当使用可能导致性能问题。合理利用响应式机制、减少不必要的计算和渲染，可以显著提升应用流畅度。

响应式数据优化

避免在 data 中声明不必要的响应式属性。Vue 会对 data 中的所有属性进行递归的响应式处理，大对象或不需要响应的数据会增加初始化开销。

// 不推荐
data() {
  return {
    largeArray: new Array(10000).fill({ value: 0 }), // 每个元素都会变成响应式
    config: Object.freeze({ // 冻结对象仍会被递归尝试响应化
      apiUrl: 'https://api.example.com',
      timeout: 5000
    })
  }
}

// 推荐方案
data() {
  return {
    // 需要响应式的数据
    activeItem: null,
    // 非响应式大数据
    largeArray: markRaw(new Array(10000).fill({ value: 0 })),
    config: { // 通过Object.freeze+markRaw彻底避免响应式
      apiUrl: 'https://api.example.com',
      timeout: 5000
    }
  }
}

对于复杂数据结构，使用 shallowRef 或 shallowReactive 可以避免深层响应：

import { shallowReactive } from 'vue'

const state = shallowReactive({
  nested: {
    // 只有第一层是响应式的
    data: { /* 大数据结构 */ }
  }
})

计算属性缓存策略

计算属性默认会缓存结果，但依赖项变化时会重新计算。避免在计算属性中进行昂贵操作：

// 低效实现
computed: {
  expensiveCalculation() {
    // 每次访问都会执行O(n^2)操作
    return this.items.reduce((acc, item) => {
      return acc + this.otherArray.find(o => o.id === item.id).value
    }, 0)
  }
}

// 优化方案
computed: {
  itemMap() {
    // 先建立查找表
    return this.otherArray.reduce((map, item) => {
      map[item.id] = item.value
      return map
    }, {})
  },
  expensiveCalculation() {
    // 计算复杂度降为O(n)
    return this.items.reduce((acc, item) => {
      return acc + (this.itemMap[item.id] || 0)
    }, 0)
  }
}

对于极少变化但访问频繁的数据，可以手动控制缓存：

import { computed } from 'vue'

let cache = null
let lastDeps = null

function cachedComputed(getter) {
  return computed(() => {
    const newDeps = getter()
    if (!shallowEqual(newDeps, lastDeps)) {
      cache = expensiveOperation(newDeps)
      lastDeps = newDeps
    }
    return cache
  })
}

列表渲染性能

v-for 渲染大型列表时，始终提供 key 并使用稳定的标识符。避免使用数组索引作为 key：

<!-- 低效做法 -->
<ul>
  <li v-for="(item, index) in items" :key="index">
    {{ item.text }}
  </li>
</ul>

<!-- 优化方案 -->
<ul>
  <li v-for="item in items" :key="item.id">
    {{ item.text }}
  </li>
</ul>

对于超长列表（1000+ 项），使用虚拟滚动技术：

import { VirtualScroller } from 'vue-virtual-scroller'

export default {
  components: { VirtualScroller },
  template: `
    <VirtualScroller
      :items="largeList"
      :item-size="50"
      key-field="id"
    >
      <template #default="{ item }">
        <div class="item">{{ item.content }}</div>
      </template>
    </VirtualScroller>
  `
}

侦听器优化

避免深度监听大型对象，明确指定需要监听的属性路径：

// 不推荐
watch: {
  bigObject: {
    handler() { /* 处理逻辑 */ },
    deep: true // 性能杀手
  }
}

// 推荐方案
watch: {
  'bigObject.importantProp'(newVal) {
    // 只监听特定属性
  }
}

对于高频事件（如滚动、鼠标移动），使用防抖或节流：

import { throttle } from 'lodash-es'

export default {
  methods: {
    handleScroll: throttle(function() {
      // 处理逻辑
    }, 100)
  },
  created() {
    window.addEventListener('scroll', this.handleScroll)
  },
  beforeUnmount() {
    window.removeEventListener('scroll', this.handleScroll)
  }
}

组件优化策略

合理拆分组件可以缩小更新范围。使用 v-once 标记静态内容：

<template>
  <div>
    <header v-once>
      <!-- 永远不会更新的头部 -->
      <h1>{{ title }}</h1>
    </header>
    <main>
      <!-- 动态内容 -->
    </main>
  </div>
</template>

对于纯展示型组件，使用 functional 选项或组合式 API 的 setup 函数：

// 函数式组件
export default {
  functional: true,
  props: ['item'],
  render(ctx) {
    return h('div', ctx.item.text)
  }
}

// 组合式API优化
import { h } from 'vue'
export default {
  props: ['item'],
  setup(props) {
    return () => h('div', props.item.text)
  }
}

响应式更新批处理

Vue 默认会批处理同步的响应式更新。对于异步操作，手动控制更新时机：

import { nextTick } from 'vue'

async function updateMultiple() {
  // 这些更新会被合并
  state.a = 1
  state.b = 2
  state.c = 3

  await nextTick()
  // DOM 已更新完成
}

在极端性能敏感场景，使用 flush: 'post' 确保侦听器在渲染后执行：

watch(
  () => state.someValue,
  () => {
    // 在DOM更新后执行
  },
  { flush: 'post' }
)

内存管理

及时清理不再使用的响应式数据，特别是全局状态：

import { effectScope } from 'vue'

const scope = effectScope()

scope.run(() => {
  const state = reactive({ /* ... */ })
  // 相关计算属性/侦听器
})

// 组件卸载时
scope.stop() // 自动清理所有响应式效果

避免在闭包中长期持有响应式引用：

// 潜在内存泄漏
let cachedState
export function useLeakyState() {
  cachedState = reactive({ data: null })
  return cachedState
}

// 安全用法
export function useSafeState() {
  const state = reactive({ data: null })
  onUnmounted(() => {
    // 清理操作
  })
  return state
}

编译时优化

利用 Vue 3 的编译时优化特性。当模板中的静态内容超过一定比例时，Vue 会自动提升静态节点：

// 模板中的静态内容会被提升
<template>
  <div>
    <h1>Static Title</h1>  <!-- 被提升 -->
    <p>{{ dynamicContent }}</p>
  </div>
</template>

手动标记不会改变的 props：

<MyComponent
  :static-prop="42"
  v-bind="{ 
    'static-attr': 'value',
    [dynamicAttr]: dynamicValue 
  }"
/>

性能监测工具

使用 Vue Devtools 的 Performance 标签页分析组件渲染时间。编程式测量特定操作：

import { performance } from 'perf_hooks'

function measure(fn) {
  const start = performance.now()
  const result = fn()
  console.log(`耗时: ${performance.now() - start}ms`)
  return result
}

// 使用示例
measure(() => {
  app.mount('#app')
})

对于生产环境，使用 window.performance.mark 记录关键时间点：

export function trackTiming(name) {
  if (process.env.NODE_ENV === 'production') {
    performance.mark(`${name}-start`)
    return () => {
      performance.mark(`${name}-end`)
      performance.measure(name, `${name}-start`, `${name}-end`)
    }
  }
  return () => {}
}

// 使用示例
const endTracking = trackTiming('data-loading')
loadData().finally(endTracking)