Vite 热加载显示不一致的结果。为啥

Posted 2023-03-13

【中文标题】Vite 热加载显示不一致的结果。为啥

【英文标题】：Vite hotloading shows inconsistent results. WhyVite 热加载显示不一致的结果。为什么

【发布时间】：2022-01-08 22:58:09

【问题描述】：

我有一个使用“脚本设置”的 Vite + Typescript + Vue 3 SPA。该应用使用 Urql 来查询 GrapgQL 端点。

我遇到这样一种情况，即只有在带有组件的组件热加载之后，查询才起作用并显示行。

事件顺序：

在我的浏览器中使用 http://localhost:4000 加载应用程序。页面加载正常，但查询中的数据是“未定义的”。加载指示器暂时显示，但 result.data.value 未定义 重新加载页面 - 没有变化，加载指示器暂时显示，但 result.data.value 未定义 在 VS Code 中保存组件 (Ctrl + s) - 结果与 1 和 2 相同。 对组件代码进行一个无关紧要的小改动，然后保存。 （我改个评论）组件是根据控制台热加载的，Loading指标没有显示，但是这次result.data.value有预期的两个元素，页面显示了。 重新加载页面 - 再次加载页面，但查询结果未定义。

代码可见github：here

/src/components/TodoPrivateList.vue 是返回数据的地方（第 29 行）。在第 71 行，它使用子组件 TodoItem.vue 来渲染每个 Todo。

我现在可以看到，使用 Vue DevTools 始终会检索数据，但不会渲染 Todos。只有当我强制热加载 TodoPrivateList.vue（通过更新其中一个 cmets）时才会呈现 Todos。

所以我现在同意@wittgenstein 的观点，这似乎是一个反应性问题。但我还不确定该怎么做。

提前致谢

【问题讨论】：

我的第一个想法是你的变量有些奇怪。看看vue 3 reactivity in depth。还是您认为一定是 vite 引起了问题？

我不认为是反应性，但我会好好看看这篇文章。我已更新问题以显示来自控制台的代码和结果

你能发布一个测试项目吗？

@wittgenstein - 我现在同意，在解决了 TypeScript 问题之后，这看起来确实是一个反应性问题。仍在尝试详细了解反应性。我还提供了存储库的链接。

【参考方案1】：

问题与 Vite 无关。

问题是由于没有等待来自 graphql 查询的响应。

在父组件中实现了“Suspense”选项。 （Vue 3 实验选项）并在查询中添加了“等待”。代码推送到 GitHub。