当前位置：首页 > VUE

vue实现settimout刷新列表

2026-02-22 00:29:20VUE

使用 setTimeout 刷新 Vue 列表

在 Vue 中，可以通过 setTimeout 实现定时刷新列表数据。以下是几种常见的方法：

使用 methods 和生命周期钩子

在组件的 methods 中定义一个刷新列表的方法，然后在 mounted 钩子中调用 setTimeout 实现定时刷新。

<template>
  <div>
    <ul>
      <li v-for="item in list" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      timer: null
    };
  },
  mounted() {
    this.refreshList();
    this.timer = setTimeout(() => {
      this.refreshList();
    }, 5000); // 每5秒刷新一次
  },
  methods: {
    refreshList() {
      // 模拟异步获取数据
      fetch('https://api.example.com/list')
        .then(response => response.json())
        .then(data => {
          this.list = data;
        });
    }
  },
  beforeDestroy() {
    clearTimeout(this.timer); // 清除定时器
  }
};
</script>

使用 setInterval 替代 setTimeout

如果需要周期性刷新，可以使用 setInterval 替代 setTimeout。

mounted() {
  this.refreshList();
  this.timer = setInterval(() => {
    this.refreshList();
  }, 5000); // 每5秒刷新一次
},
beforeDestroy() {
  clearInterval(this.timer); // 清除定时器
}

使用 Vue 的 watch 监听数据变化

如果列表数据依赖于某个变量，可以通过 watch 监听该变量变化并刷新列表。

watch: {
  someDependency(newVal) {
    clearTimeout(this.timer);
    this.timer = setTimeout(() => {
      this.refreshList();
    }, 1000); // 延迟1秒刷新
  }
}

使用第三方库如 lodash 的 debounce

对于高频触发的场景，可以使用 lodash 的 debounce 方法防抖。

vue实现settimout刷新列表

import { debounce } from 'lodash';

methods: {
  refreshList: debounce(function() {
    fetch('https://api.example.com/list')
      .then(response => response.json())
      .then(data => {
        this.list = data;
      });
  }, 500) // 防抖延迟500毫秒
}