为啥我的浏览器加载不出来vue的示例

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了为啥我的浏览器加载不出来vue的示例相关的知识,希望对你有一定的参考价值。

    vue不支持低版本IE,推荐使用chrome,不推荐IE

    是否使用了es6或者更新的语法,老浏览器不支持,可以用polyfill转一下

    看看控制台有没有报错,是否存在语法错误

参考技术A 看下是否设置兼容模式,或者更换浏览器试试看,IE或者搜狗或者360浏览器都是可以的。建议用最后一个,安全性能比较高,很多网站都可以打开。 参考技术B 控制台排查错误 参考技术C 是否使用了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浏览器为啥有的网页下面已经提示完毕了,但是还啥也显示不出来

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

为啥我的电脑打开网页,验证码都不显示出来?

iOS UIImageView 网络图片资源加载不出来,但在Chorme浏览器上可以打开

为啥vue打包后出现后 在浏览器上打开的是空白页