当前位置：首页 > VUE

vue如何实现冒泡

2026-03-26 21:19:55VUE

Vue 中实现冒泡排序

在 Vue 中实现冒泡排序，可以通过以下方法完成：

数据准备 定义一个数组作为排序的目标数据，并在 Vue 的 data 中初始化：

data() {
  return {
    items: [5, 3, 8, 4, 2],
    sortedItems: []
  }
}

实现冒泡排序算法 在 Vue 的 methods 中编写冒泡排序逻辑：

methods: {
  bubbleSort() {
    let arr = [...this.items];
    let len = arr.length;
    for (let i = 0; i < len - 1; i++) {
      for (let j = 0; j < len - 1 - i; j++) {
        if (arr[j] > arr[j + 1]) {
          [arr[j], arr[j + 1]] = [arr[j + 1], arr[j]];
        }
      }
    }
    this.sortedItems = arr;
  }
}

模板中显示结果 在 Vue 的模板中展示原始数据和排序结果：

<template>
  <div>
    <p>原始数组: {{ items }}</p>
    <button @click="bubbleSort">开始排序</button>
    <p>排序后数组: {{ sortedItems }}</p>
  </div>
</template>

优化冒泡排序动画效果

如果需要可视化排序过程，可以结合 Vue 的过渡效果和定时器：

vue如何实现冒泡

添加排序步骤记录 修改排序方法以记录每一步：

methods: {
  async bubbleSort() {
    let arr = [...this.items];
    let len = arr.length;
    for (let i = 0; i < len - 1; i++) {
      for (let j = 0; j < len - 1 - i; j++) {
        if (arr[j] > arr[j + 1]) {
          [arr[j], arr[j + 1]] = [arr[j + 1], arr[j]];
          await this.delay(500); // 添加延迟以观察过程
          this.sortedItems = [...arr];
        }
      }
    }
  },
  delay(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
  }
}

模板中添加动画 使用 Vue 的过渡组件增强视觉效果：

<transition-group name="list" tag="div">
  <span v-for="(item, index) in sortedItems" :key="index" class="list-item">
    {{ item }}
  </span>
</transition-group>

添加 CSS 过渡效果

vue如何实现冒泡

.list-item {
  display: inline-block;
  margin-right: 10px;
  transition: all 0.5s;
}
.list-enter-active, .list-leave-active {
  transition: all 0.5s;
}
.list-enter, .list-leave-to {
  opacity: 0;
  transform: translateY(30px);
}

封装为可复用组件

将冒泡排序逻辑封装为独立组件：

创建 SortComponent.vue

<template>
  <div>
    <slot :items="sortedItems" :sort="bubbleSort"></slot>
  </div>
</template>

<script>
export default {
  props: {
    items: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      sortedItems: [...this.items]
    }
  },
  methods: {
    bubbleSort() {
      let arr = [...this.sortedItems];
      let len = arr.length;
      for (let i = 0; i < len - 1; i++) {
        for (let j = 0; j < len - 1 - i; j++) {
          if (arr[j] > arr[j + 1]) {
            [arr[j], arr[j + 1]] = [arr[j + 1], arr[j]];
          }
        }
      }
      this.sortedItems = arr;
    }
  }
}
</script>

在父组件中使用

<template>
  <sort-component :items="[5, 3, 8, 4, 2]">
    <template v-slot="{ items, sort }">
      <div>
        <p>当前顺序: {{ items }}</p>
        <button @click="sort">排序</button>
      </div>
    </template>
  </sort-component>
</template>