Vue组合式API+Axios获取WordPress文章遇递归更新超限错误

• 模板直接调用数据更新函数：这是最常见的触发点。比如在模板里写了{{ fetchPosts() }}，组件每次渲染都会执行这个函数，而函数内又会修改posts的响应式值，触发新一轮渲染，形成无限循环，导致posts被反复填充。
• watch回调修改监听的响应式数据：如果用watch监听posts，但回调里又对posts做赋值/追加操作，会触发watch再次执行，形成递归更新。
• 数据获取逻辑未放在正确生命周期钩子：把fetchPosts直接写在setup顶层代码中，而非onMounted这类仅执行一次的钩子，会导致组件每次重渲染都执行一次请求，反复填充posts。
• 错误的响应式数据更新方式：每次请求返回数据后，用posts.value.push(...res.data)追加而非posts.value = res.data替换原有数据，同时追加操作被重复触发，导致posts长度持续增长，进而触发渲染循环。

• 将数据获取逻辑放在生命周期钩子：把获取文章的函数放在onMounted里，确保仅在组件挂载时执行一次：

  import { ref, onMounted } from 'vue'
  import axios from 'axios'
  
  export default {
    setup() {
      const posts = ref([])
  
      const fetchPosts = async () => {
        const res = await axios.get('你的WordPress接口地址')
        posts.value = res.data // 直接替换，避免重复追加
      }
  
      onMounted(fetchPosts)
  
      return { posts }
    }
  }
  

• 禁止在模板中调用修改响应式数据的函数：模板仅做渲染展示，不要写{{ fetchPosts() }}这类触发数据更新的代码。
• 检查watch逻辑：如果使用watch，确保回调不修改被监听的posts；若需衍生数据，改用computed：

  // 错误示例：watch内修改posts导致循环
  watch(posts, () => {
    posts.value.push({/* 新数据 */})
  })
  
  // 正确做法：用computed处理衍生数据
  const filteredPosts = computed(() => posts.value.filter(item => item.status === 'publish'))
  

• 确保数据更新为替换操作：每次请求返回数据后，直接用posts.value = res.data覆盖原有数组，避免数据无限增长。

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