为啥我的浏览器加载不出来vue的示例
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了为啥我的浏览器加载不出来vue的示例相关的知识,希望对你有一定的参考价值。
vue不支持低版本IE,推荐使用chrome,不推荐IE
是否使用了es6或者更新的语法,老浏览器不支持,可以用polyfill转一下
看看控制台有没有报错,是否存在语法错误
Vite 热加载显示不一致的结果。为啥
【中文标题】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。
【讨论】:
以上是关于为啥我的浏览器加载不出来vue的示例的主要内容,如果未能解决你的问题,请参考以下文章
为啥我用HTML写的网页加载不出来JavaScript的代码呢
我的IE浏览器为啥有的网页下面已经提示完毕了,但是还啥也显示不出来