面试题：Vue条件渲染与列表渲染结合的优化

Question

在一个电商商品列表页面，每个商品根据库存情况显示不同的样式（有库存为绿色，无库存为红色），同时商品列表可进行分页展示。请描述如何运用Vue的条件渲染和列表渲染实现该功能，并说明可能存在的性能优化点及解决方案。

Answer 1

1. 使用Vue的条件渲染和列表渲染实现该功能

1. 数据准备：在Vue实例的data中定义商品列表数据，每个商品对象包含库存信息等属性。例如：

data() {
  return {
    pageSize: 10,
    currentPage: 1,
    products: [
      { id: 1, name: '商品1', stock: 10 },
      { id: 2, name: '商品2', stock: 0 },
      // 更多商品数据
    ]
  };
}

2. 列表渲染：使用v - for指令来循环渲染商品列表。例如：

<ul>
  <li v - for="product in getPagedProducts" :key="product.id">
    <!-- 商品名称等其他信息 -->
    <span>{{ product.name }}</span>
    <!-- 根据库存情况显示不同样式 -->
    <span :style="{ color: product.stock > 0? 'green' :'red' }">
      {{ product.stock > 0? '有库存' : '无库存' }}
    </span>
  </li>
</ul>

3. 分页处理：通过计算属性getPagedProducts来获取当前页的商品数据。例如：

computed: {
  getPagedProducts() {
    const startIndex = (this.currentPage - 1) * this.pageSize;
    const endIndex = startIndex + this.pageSize;
    return this.products.slice(startIndex, endIndex);
  }
}

2. 性能优化点及解决方案

1. 优化点：
   • 大量数据渲染：当商品数据量很大时，一次性渲染所有分页数据可能导致性能问题。
   • 频繁重新渲染：商品库存变化频繁可能导致不必要的重新渲染。
2. 解决方案：
   • 虚拟列表：对于大量数据，可以使用虚拟列表技术。例如vue - virtual - scroll - list库，它只渲染可视区域内的商品，极大减少渲染的DOM元素数量，提高性能。
   • 缓存计算属性：对于分页计算属性getPagedProducts，可以通过Vue.memoize（如果Vue支持，或者自行实现缓存逻辑）来缓存计算结果，避免重复计算。
   • 减少响应式数据变动：尽量避免直接修改商品库存数据导致整个列表重新渲染。可以考虑使用局部状态管理或者Object.freeze冻结不需要响应式更新的部分数据，只在必要时触发更新。