当前位置：首页 > VUE

vue如何实现冒泡

2026-02-09 12:37:38VUE

Vue 中实现冒泡排序的步骤

在 Vue 中实现冒泡排序，可以通过数据绑定和响应式特性动态展示排序过程。以下是实现冒泡排序的完整代码示例：

vue如何实现冒泡

<template>
  <div>
    <h3>原始数组: {{ originalArray }}</h3>
    <h3>排序过程:</h3>
    <ul>
      <li v-for="(step, index) in steps" :key="index">{{ step }}</li>
    </ul>
    <button @click="startSorting">开始排序</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      originalArray: [5, 3, 8, 4, 2],
      steps: []
    }
  },
  methods: {
    startSorting() {
      this.steps = []
      let arr = [...this.originalArray]

      for (let i = 0; i < arr.length - 1; i++) {
        for (let j = 0; j < arr.length - 1 - i; j++) {
          if (arr[j] > arr[j + 1]) {
            [arr[j], arr[j + 1]] = [arr[j + 1], arr[j]]
            this.steps.push(`交换 ${arr[j]} 和 ${arr[j + 1]}: [${arr}]`)
          }
        }
      }
    }
  }
}
</script>

实现原理说明

冒泡排序算法通过多次遍历数组，比较相邻元素并交换位置，使较大的元素逐渐"浮"到数组末尾。在 Vue 中实现时，利用了响应式数据特性：

vue如何实现冒泡

使用 originalArray 存储初始数组
steps 数组记录每次交换操作
startSorting 方法执行排序算法并更新步骤记录

优化可视化效果

如需增强可视化效果，可以添加定时器逐步显示排序过程：

async startSorting() {
  this.steps = []
  let arr = [...this.originalArray]

  for (let i = 0; i < arr.length - 1; i++) {
    for (let j = 0; j < arr.length - 1 - i; j++) {
      if (arr[j] > arr[j + 1]) {
        [arr[j], arr[j + 1]] = [arr[j + 1], arr[j]]
        this.steps.push(`交换 ${arr[j]} 和 ${arr[j + 1]}: [${arr}]`)
        await new Promise(resolve => setTimeout(resolve, 1000))
      }
    }
  }
}