冒泡排序（Bubble Sort）

冒泡排序（Bubble Sort）

冒泡排序是一种简单的排序算法。它重复地遍历待排序的数列，一次比较两个元素，如果它们的顺序错误就把它们交换过来。遍历数列的工作是重复地进行直到没有再需要交换，也就是说该数列已经排序完成。

示例

3

5

7

8

4

1

6

9

2

点我排序

<script setup lang="ts">
  import {reactive} from "vue";
  const bubbleSortList = reactive({
    bubbleSortList:[3,5,7,8,4,1,6,9,0]
  })
  const bubbleSortClick= ()=>{
    bubbleSort(bubbleSortList.bubbleSortList)
  }
  function bubbleSort(arr) {
    let n = arr.length;
    for (let i = 0; i < n - 1; i++) {
      for (let j = 0; j < n - 1 - i; j++) {
        if (arr[j] > arr[j + 1]) {
          [arr[j], arr[j + 1]] = [arr[j + 1], arr[j]];
        }
      }
    }
    return arr;
  }
</script>
<template>
  <p>{{JSON.stringify(bubbleSortList.bubbleSortList)}}</p>
  <h4 @click="bubbleSortClick">点我排序</h4>
</template>
<style scoped lang="scss">
</style>

代码逻辑详解

初始化响应式变量

• 利用 reactive 创建一个响应式对象，用于存储待排序数组。任何对数组的修改都会触发视图更新。

核心功能

• 实现了 bubbleSortClick 方法，用于调用冒泡排序逻辑并实时更新 bubbleSortList.bubbleSortList。

冒泡排序说明

• 外层循环：控制冒泡排序的轮数，为数组长度减 1（n-1）。
• 内层循环：比较当前项和紧邻项（arr[j] 和 arr[j+1]），并在前者大于后者时进行交换。
• 逐步排序：每轮完成后，未排序部分的最大值被放置到数组尾部。

用户交互

• 点击 <h4> 标签后触发 bubbleSortClick 函数，完成排序并立即展示结果。

---

注意事项

1. 性能问题：

   • 冒泡排序的时间复杂度为 O(n²)，对大数组性能较差。更大的数据集建议使用快速排序或归并排序等更优的算法。

2. Vue 响应性：

   • 使用 reactive 创建的响应式对象，需要通过直接赋值修改其属性的值，这样 Vue 才会侦测到变化并触发视图更新。

3. 代码复用性：

   • 可将 bubbleSort 函数提取到单独的模块中，以便在其他地方复用。

4. 可视化交互：

   • 结合 Vue 的生命周期或动画能力，可以让排序过程动态展现，提升用户体验。