Vue3页面加载时无法获取数据，为何仅触发更新后才显示？

核心问题是错误破坏了响应式变量的引用关系：

• 用ref()创建的projects是一个响应式容器，Vue依靠这个容器内部的机制追踪数据变化。
• 你在获取后端数据后直接执行projects = response，相当于把原本的响应式ref容器直接替换成了普通的后端返回数据（数组/对象），此时projects不再是响应式变量，Vue无法感知到它的变化，自然不会触发页面更新。
• 当你修改无关代码触发页面重新渲染时，模板会读取projects的当前值（也就是已经被替换的后端数据），所以这时候数据才会显示出来。

修复方案 #

只需要修改赋值逻辑，更新ref容器的.value属性而非直接替换变量：

<template>
  <div>
    {{ projects }}
  </div>
</template>

<script setup>
import { ref } from 'vue'
let projects = ref([])

const getData = () => {
  fetch('https://www.my-site.com/wp/wp-json/projects/v1/posts')
    .then(res => res.json()).then((response) => {
      // 改为更新ref的.value属性，保留响应式
      projects.value = response
    }).catch((error) => {
      console.log(error)
    });
}

getData()
</script> 

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