vue选项乱序实现

实现 Vue 选项乱序的方法

使用 v-for 和 sort 方法

在 Vue 中可以通过 v-for 指令结合 JavaScript 的 sort 方法来实现选项的乱序。以下是具体实现方式：

<template>
  <div>
    <div v-for="item in shuffledItems" :key="item.id">
      {{ item.text }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, text: '选项1' },
        { id: 2, text: '选项2' },
        { id: 3, text: '选项3' }
      ]
    }
  },
  computed: {
    shuffledItems() {
      return [...this.items].sort(() => Math.random() - 0.5)
    }
  }
}
</script>

使用 Lodash 的 shuffle 方法

如果需要更高效的乱序，可以使用 Lodash 的 shuffle 方法：

<template>
  <div>
    <div v-for="item in shuffledItems" :key="item.id">
      {{ item.text }}
    </div>
  </div>
</template>

<script>
import { shuffle } from 'lodash'

export default {
  data() {
    return {
      items: [
        { id: 1, text: '选项1' },
        { id: 2, text: '选项2' },
        { id: 3, text: '选项3' }
      ]
    }
  },
  computed: {
    shuffledItems() {
      return shuffle(this.items)
    }
  }
}
</script>

使用 Array.prototype.sort 的随机排序

如果不想依赖外部库，可以使用原生 JavaScript 的 sort 方法结合随机数生成器：

shuffledItems() {
  return this.items.slice().sort(() => Math.random() - 0.5)
}

使用 Fisher-Yates 洗牌算法

Fisher-Yates 算法是一种高效的乱序算法，适用于 Vue 中的选项乱序：

shuffleArray(array) {
  for (let i = array.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1))
    ;[array[i], array[j]] = [array[j], array[i]]
  }
  return array
}

在 Vue 组件中使用：

computed: {
  shuffledItems() {
    return this.shuffleArray([...this.items])
  }
}

注意事项

• 使用 v-for 时，确保每个选项有唯一的 key 属性，避免 Vue 的渲染优化出现问题。
• 如果需要每次渲染都重新乱序，可以在 mounted 或 created 生命周期钩子中调用乱序方法。
• 避免在模板中直接调用乱序方法，这可能导致不必要的性能开销。