渲染性能优化

约 1143 字大约 4 分钟

2026-02-10

Vue.js 应用的性能优化是构建高性能应用的关键。本章将介绍 Vue 2.x 中的各种性能优化技巧和最佳实践。

1. 虚拟DOM优化

1.1 使用 key 属性

在使用 v-for 时，始终为每个元素提供一个唯一的 key 属性，以便 Vue 能够高效地跟踪每个节点的身份：

<!-- 不推荐 -->
<div v-for="item in items">{{ item.name }}</div>

<!-- 推荐 -->
<div v-for="item in items" :key="item.id">{{ item.name }}</div>

1.2 避免在 v-for 中使用复杂表达式

<!-- 不推荐 -->
<div v-for="item in items" :style="{ backgroundColor: item.colors.bg }">
  {{ item.name.toUpperCase() }}
</div>

<!-- 推荐 -->
<div v-for="item in items" :style="getItemStyle(item)" :key="item.id">
  {{ getItemName(item) }}
</div>

methods: {
  getItemStyle(item) {
    return {
      backgroundColor: item.colors.bg
    }
  },
  getItemName(item) {
    return item.name.toUpperCase()
  }
}

2. 组件优化

2.1 使用 v-show 和 v-if 的正确时机

v-if 有更高的切换开销，适用于条件很少改变的情况
v-show 有更高的初始渲染开销，适用于频繁切换的情况

<!-- 频繁切换使用 v-show -->
<button @click="toggleSidebar">切换侧边栏</button>
<sidebar v-show="showSidebar" />

<!-- 很少改变的条件使用 v-if -->
<admin-panel v-if="isAdmin" />

2.2 组件懒加载

使用动态导入实现组件懒加载：

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

2.3 异步组件

Vue.component('async-example', function (resolve, reject) {
  setTimeout(function () {
    resolve({
      template: '<div>I am async!</div>'
    })
  }, 1000)
})

// 或使用 Promise
Vue.component('async-webpack-example', () =>
  import('./MyComponent.vue')
)

3. 数据优化

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

// 不推荐
export default {
  template: `
    <div>{{ expensiveValueA() + expensiveValueB() }}</div>
  `,
  methods: {
    expensiveValueA() {
      // 复杂计算
    },
    expensiveValueB() {
      // 复杂计算
    }
  }
}

// 推荐
export default {
  template: `
    <div>{{ combinedValue }}</div>
  `,
  computed: {
    combinedValue() {
      return this.expensiveValueA + this.expensiveValueB
    },
    expensiveValueA() {
      // 复杂计算，会被缓存
    },
    expensiveValueB() {
      // 复杂计算，会被缓存
    }
  }
}

3.2 使用 Object.freeze() 阻止响应式转换

对于大型的静态数据列表，使用 Object.freeze() 可以避免将其转换为响应式数据：

export default {
  data() {
    return {
      users: []
    }
  },
  async created() {
    const users = await api.getLargeUserList()
    // 用户列表不会改变，使用 freeze 避免响应式转换
    this.users = Object.freeze(users)
  }
}

4. 事件优化

4.1 事件节流和防抖

// 防抖
export default {
  methods: {
    handleInput: _.debounce(function (e) {
      // 处理输入事件
      this.search(e.target.value)
    }, 500)
  }
}

// 节流
export default {
  methods: {
    handleScroll: _.throttle(function () {
      // 处理滚动事件
      this.updatePosition()
    }, 16)
  }
}

4.2 移除未使用的事件监听器

export default {
  mounted() {
    window.addEventListener('resize', this.handleResize)
  },
  beforeDestroy() {
    // 记得移除事件监听器
    window.removeEventListener('resize', this.handleResize)
  }
}

5. 使用 keep-alive 优化组件缓存

对于需要频繁切换但内容不变的组件，使用 keep-alive 缓存：

<keep-alive>
  <component :is="currentView">
    <!-- 非活动组件将被缓存 -->
  </component>
</keep-alive>

<!-- 或者有条件地缓存 -->
<keep-alive include="a,b">
  <component :is="currentView">
    <!-- 将缓存 name 为 a 或 b 的组件 -->
  </component>
</keep-alive>

<keep-alive exclude="c">
  <component :is="currentView">
    <!-- c 组件将不会被缓存 -->
  </component>
</keep-alive>

6. 优化列表渲染

6.1 大列表虚拟滚动

对于大量数据的列表，考虑使用虚拟滚动：

<template>
  <div class="virtual-list" @scroll="handleScroll">
    <div :style="{ height: totalHeight + 'px' }" class="scroll-area">
      <div :style="{ transform: translateY }" class="list-content">
        <div
          v-for="item in visibleItems"
          :key="item.id"
          class="list-item"
          :style="{ height: itemHeight + 'px' }"
        >
          {{ item.content }}
        </div>
      </div>
    </div>
  </div>
</template>

6.2 分页加载

export default {
  data() {
    return {
      items: [],
      currentPage: 1,
      pageSize: 20,
      loading: false
    }
  },
  methods: {
    async loadMore() {
      if (this.loading) return
      
      this.loading = true
      try {
        const newItems = await api.getItems({
          page: this.currentPage,
          size: this.pageSize
        })
        this.items = this.items.concat(newItems)
        this.currentPage++
      } finally {
        this.loading = false
      }
    }
  }
}

7. 使用 Production 模式

确保在生产环境中使用 Vue 的生产版本，这会禁用警告和调试功能，显著提升性能。

8. 第三方库优化

8.1 按需引入

只引入需要的功能：

// 不推荐
import _ from 'lodash'
const result = _.pick(object, ['a', 'b'])

// 推荐
import pick from 'lodash/pick'
const result = pick(object, ['a', 'b'])

8.2 使用 Tree Shaking

确保你的构建工具支持 Tree Shaking，只打包实际使用的代码。

9. 使用 Chrome DevTools 进行性能分析

Vue 提供了 Vue DevTools，可以帮助分析应用性能：

组件检查：查看组件的渲染时间和更新频率
时间线：分析组件的渲染过程
性能面板：找出性能瓶颈

10. 代码分割

使用 Webpack 的代码分割功能：

// 路由级别的代码分割
const Home = () => import(/* webpackChunkName: "home" */ './views/Home.vue')
const About = () => import(/* webpackChunkName: "about" */ './views/About.vue')

// 组件级别的代码分割
const AsyncComponent = () => import(
  /* webpackChunkName: "async-component" */ 
  './components/AsyncComponent.vue'
)

性能监控

在生产环境中监控性能：

// 监控组件渲染时间
export default {
  beforeUpdate() {
    this.startTime = performance.now()
  },
  updated() {
    const renderTime = performance.now() - this.startTime
    if (renderTime > 16) { // 超过一帧的时间
      console.warn(`Slow component render: ${renderTime}ms`)
    }
  }
}

通过实施这些优化策略，可以显著提升 Vue 应用的性能和用户体验。