vue实现冒泡排序

实现思路

在Vue中实现冒泡排序，需要将排序逻辑与Vue的响应式数据绑定结合。通过操作Vue的data属性中的数组，结合冒泡排序算法，动态更新数组顺序，并利用Vue的响应式特性实时渲染排序过程。

代码实现

以下是一个完整的Vue组件示例，实现冒泡排序并展示排序过程：

<template>
  <div>
    <button @click="startSort">开始排序</button>
    <button @click="reset">重置</button>
    <div class="array-container">
      <div 
        v-for="(item, index) in array" 
        :key="index" 
        class="array-item" 
        :style="{ height: `${item * 10}px`, backgroundColor: getColor(index) }"
      >
        {{ item }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      array: [5, 3, 8, 4, 2, 7, 1, 6],
      sorting: false,
      currentIndex: -1,
      nextIndex: -1
    };
  },
  methods: {
    getColor(index) {
      if (index === this.currentIndex || index === this.nextIndex) {
        return '#ff0000';
      }
      return '#42b983';
    },
    async startSort() {
      if (this.sorting) return;
      this.sorting = true;
      let arr = [...this.array];
      let len = arr.length;
      for (let i = 0; i < len - 1; i++) {
        for (let j = 0; j < len - 1 - i; j++) {
          this.currentIndex = j;
          this.nextIndex = j + 1;
          await new Promise(resolve => setTimeout(resolve, 500));
          if (arr[j] > arr[j + 1]) {
            [arr[j], arr[j + 1]] = [arr[j + 1], arr[j]];
            this.array = [...arr];
          }
        }
      }
      this.currentIndex = -1;
      this.nextIndex = -1;
      this.sorting = false;
    },
    reset() {
      this.array = [5, 3, 8, 4, 2, 7, 1, 6];
      this.currentIndex = -1;
      this.nextIndex = -1;
      this.sorting = false;
    }
  }
};
</script>

<style>
.array-container {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  margin-top: 20px;
  height: 300px;
}
.array-item {
  width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}
</style>

关键点解析

响应式数据绑定 Vue的响应式系统会自动检测array的变化并更新DOM。通过直接修改this.array的值，视图会自动重新渲染。

排序过程可视化 通过currentIndex和nextIndex标记当前比较的两个元素，并在模板中通过动态样式高亮显示。

异步控制排序速度 使用setTimeout和Promise实现排序步骤的延迟，使排序过程可视化更清晰。

优化方向

1. 性能优化
   对于大型数组，冒泡排序效率较低。可以添加排序完成检测，提前终止循环。

2. 交互增强
   添加排序暂停、继续功能，或允许用户自定义数组。

3. 动画效果
   使用Vue的过渡动画或第三方动画库（如GSAP）增强视觉效果。

   

注意事项

• 直接修改数组元素（如this.array[0] = newValue）不会触发Vue的响应式更新，需使用Vue.set或替换整个数组。
• 排序算法中的延迟时间（500ms）可根据实际需求调整。