vue实现交叉遍历

Vue 实现交叉遍历的方法

交叉遍历通常指对两个数组或对象进行组合遍历，生成所有可能的组合。以下是几种常见的实现方式：

使用嵌套 v-for 指令

Vue 模板中可以直接使用嵌套的 v-for 实现交叉遍历：

<template>
  <div>
    <div v-for="item1 in array1" :key="item1">
      <div v-for="item2 in array2" :key="item2">
        {{ item1 }} - {{ item2 }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      array1: ['A', 'B', 'C'],
      array2: [1, 2, 3]
    }
  }
}
</script>

使用计算属性预处理数据

对于复杂场景，可以先用计算属性生成交叉组合：

<template>
  <div>
    <div v-for="pair in combined" :key="pair.join('-')">
      {{ pair[0] }} - {{ pair[1] }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      array1: ['A', 'B', 'C'],
      array2: [1, 2, 3]
    }
  },
  computed: {
    combined() {
      return this.array1.flatMap(item1 => 
        this.array2.map(item2 => [item1, item2])
      )
    }
  }
}
</script>

使用 methods 方法处理

对于需要动态参数的场景，可以使用 methods：

<template>
  <div>
    <div v-for="(item1, index1) in array1" :key="index1">
      <div v-for="(item2, index2) in array2" :key="index2">
        {{ combineItems(item1, item2) }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      array1: ['A', 'B', 'C'],
      array2: [1, 2, 3]
    }
  },
  methods: {
    combineItems(a, b) {
      return `${a}-${b}`
    }
  }
}
</script>

使用渲染函数实现

对于需要更灵活控制的场景，可以使用渲染函数：

export default {
  data() {
    return {
      array1: ['A', 'B', 'C'],
      array2: [1, 2, 3]
    }
  },
  render(h) {
    return h('div', 
      this.array1.map(item1 => 
        h('div', 
          this.array2.map(item2 => 
            h('div', `${item1}-${item2}`)
          )
        )
      )
    )
  }
}

性能优化建议

对于大数据量的交叉遍历，建议采用虚拟滚动或分页加载技术。可以使用第三方库如 vue-virtual-scroller 来优化性能：

<template>
  <RecycleScroller
    :items="combined"
    :item-size="50"
    key-field="id"
  >
    <template v-slot="{ item }">
      <div>{{ item.text }}</div>
    </template>
  </RecycleScroller>
</template>