Nuxt.js项目实现无刷新每分钟更新Hackernews帖子及修复强制更新按钮

这里是针对你需求的完整解决方案，主要解决两个核心问题：每分钟自动无刷新更新帖子，以及修复强制更新按钮的替换逻辑，同时优化了异步请求的处理方式：

核心修改说明 #

• 修复强制更新时的数组清空错误：原代码未正确访问实例的stories数组，改为this.stories = []
• 实现定时自动更新：在组件挂载后启动每分钟定时器，组件销毁前清除定时器避免内存泄漏
• 优化异步请求：用Promise.all批量处理帖子详情请求，确保所有数据返回后一次性替换数组，避免逐步追加
• 修正v-for的key值：使用帖子的id作为唯一key，符合Vue的列表渲染规范

完整修改后的代码 #

<template>
  <div>
    <button class="btn" @click="refresh">Force update</button>
    <div class="grid grid-cols-4 gap-5">
      <div v-for="s in stories" :key="s.id">
        <StoryCard :story="s" />
      </div>
    </div>
  </div>
</template>

<script>
definePageMeta({
  layout: 'stories',
})
export default {
  data() {
    return {
      err: '',
      stories: [],
      updateTimer: null // 存储定时器ID，用于销毁时清除
    }
  },
  mounted() {
    this.reNew()
    // 启动每分钟自动更新
    this.updateTimer = setInterval(() => {
      this.reNew()
    }, 60000)
  },
  beforeUnmount() {
    // 组件销毁前清除定时器，防止内存泄漏
    if (this.updateTimer) {
      clearInterval(this.updateTimer)
    }
  },
  methods: {
    refresh() {
      this.reNew() // 直接调用reNew，内部已经会清空并重新获取数据
    },
    async reNew() {
      try {
        // 清空现有数据
        this.stories = []
        // 获取top stories ID列表
        const topStoryIds = await $fetch('https://hacker-news.firebaseio.com/v0/topstories.json?print=pretty')
        const targetIds = topStoryIds.slice(0, 10)
        
        // 批量获取帖子详情，用Promise.all确保所有请求完成
        const storyPromises = targetIds.map(id => 
          $fetch(`https://hacker-news.firebaseio.com/v0/item/${id}.json?print=pretty`)
        )
        const newStories = await Promise.all(storyPromises)
        
        // 一次性更新stories数组
        this.stories = newStories
      } catch (err) {
        this.err = err
        console.error('更新帖子失败:', err)
      }
    },
  },
}
</script>

<style scoped>
.router-link-exact-active {
  color: #12b488;
}
</style>

关键细节解释 #

1. 定时器管理：在mounted中创建定时器，beforeUnmount中清除，这是Vue组件的最佳实践，避免组件销毁后定时器仍在运行导致内存泄漏。
2. 异步请求优化：原代码用forEach循环发起异步请求，会导致每个请求完成后就往数组里push数据，造成逐步追加的效果。改用Promise.all可以等待所有帖子详情请求完成后，一次性替换整个stories数组，实现完整替换更新。
3. 错误处理：将所有异步逻辑包裹在try/catch中，统一处理错误，避免单个请求失败导致整个流程中断。
4. key值修正：使用s.id作为v-for的key，因为每个帖子的id是唯一且稳定的，Vue可以更高效地复用DOM元素，提升渲染性能。

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