Vue中如何遍历嵌套数组并每隔5秒依次展示数据？

问题回顾 #

你有一个存储用户信息的嵌套数组，希望每个用户的资料框能每隔5秒依次展示Info数组里的数字，直到最后一个并保持显示。但最初的实现中，所有用户资料框都只显示最后一个用户的数据，后来尝试组件化方案时也遇到了同样问题，最终调整后解决了。

原方案的核心问题 #

你最初在父组件里用了全局的rate变量存储当前显示的数字，所有用户的定时器都会修改这个变量：

appendInfo: function() {
  for (let i = 0, l = this.arrays.length; i < l; i++) {
    let info = this.arrays[i]['Info'];
    let timer = 0;
    for (let i = 0; i < info.length; i++) {
      setTimeout(() => this.rate = info[i], timer);
      timer = timer + 5000;
    }
  }
}

因为所有定时器最终都会修改同一个this.rate，最后执行的定时器会覆盖之前的赋值，所以所有用户资料框都会显示最后一个用户的最后一个数字。

正确的组件化解决方案 #

要让每个用户的展示独立，最合理的方式是把“依次展示数字”的逻辑封装成独立组件，每个组件管理自己的状态，互不干扰。

1. 父组件代码

父组件负责循环渲染用户资料框，并把每个用户的Info数组传递给子组件：

<template>
  <div class="outer" v-for="(item, index) in arrays" :key="index" :id="item.name">
    <h4>{{ item.name }}</h4>
    <!-- 传递当前用户的Info数组给子组件 -->
    <rate-displayer :rates="item.Info" />
  </div>
</template>

<script>
import RateDisplayer from './RateDisplayer.vue'

export default {
  components: {
    RateDisplayer
  },
  data() {
    return {
      arrays: [
        { name: 'Max', Info: [60, 75, 70, 85, 65] },
        { name: 'Dave', Info: [70, 95, 60, 65, 83] }
      ]
    }
  }
}
</script>

2. RateDisplayer子组件代码

子组件接收rates数组，自己管理当前显示的数字和定时器：

<template>
  <div class="box c">Info: <span>{{ currentRate }}</span></div>
</template>

<script>
export default {
  props: {
    rates: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      currentIndex: 0,
      currentRate: null,
      displayTimer: null
    }
  },
  mounted() {
    // 初始化显示第一个数字
    this.currentRate = this.rates[0]
    // 启动定时器，每隔5秒切换下一个数字
    this.displayTimer = setInterval(() => {
      if (this.currentIndex < this.rates.length - 1) {
        this.currentIndex++
        this.currentRate = this.rates[this.currentIndex]
      } else {
        // 到最后一个数字时清除定时器，避免无效执行
        clearInterval(this.displayTimer)
      }
    }, 5000)
  },
  beforeUnmount() {
    // 组件销毁前清除定时器，防止内存泄漏
    if (this.displayTimer) {
      clearInterval(this.displayTimer)
    }
  }
}
</script>

为什么这个方案有效 #

每个RateDisplayer组件都有自己独立的currentIndex和currentRate状态，定时器只会修改当前组件内的变量，所以每个用户的数字展示都是独立进行的，不会互相覆盖。

你最后提到移除父组件中错误定义的props、interval和rate后功能正常，正是因为之前父组件的全局状态干扰了子组件的独立状态管理，移除后子组件就能正确地自己控制展示逻辑了。

内容的提问来源于stack exchange，提问作者YJay