VueJS在Safari中无法渲染

Question

Safari不能渲染我用VueJS构建的单页应用。

我已经花了两周的时间开发它。它包含组件，根据用户点击显示或隐藏，并通过“v-for”元素呈现数据对象。

在Chrome中一切正常！！在Mozilla中也是...在Safari中列表不显示。为什么Safari没有渲染任何东西？我甚至无法进行调试。

我查找了解决方法，比如polyfills...但这些似乎不被Safari支持...所以实施它们毫无意义。

如果没有解决办法，我是否需要回到使用JS + Jquery重新构建呢？希望各位能提供一些支持或见解。

提前致谢。

- Tony

---

永不退缩，尝试更新Safari浏览器，控制台中有任何错误吗？ - Srinivas Damam

我非常确定这与VueJS没有任何关系，你的代码有问题。 你是否编写并通过了单元测试？控制台输出是什么？ - Belmin Bedak

希望您说的是Mac上的Safari而不是Windows :) - 如果是后者，您很可能会在控制台上看到错误 - 如果没有，您应该在关键方法（created、mounted等）中简单地使用console.log几个语句以检查一切失败的位置。 - Frnak

我们可以有更多的信息吗？例如控制台中的错误。 - Ru Chern Chong

我很想知道更多关于你所遇到的问题的细节，可能和我的情况一样，我现在卡在这里了。你的问题在谷歌上出现了，请分享解决方案。 - kartsims

Answer 1

我也遇到了这个问题，就是用v-for列出一系列组件，但在Safari（Mac上）无法渲染到屏幕上（或DOM中），但在Firefox和Chrome（甚至在Mac上）却可以正常工作。经过长时间的尝试，我终于解决了这个问题。答案分为两部分。

快速答案

在我的情况下，渲染错误是由于日期转换在我的代码中某个深处出错导致的。确实，在这个文件中，我通过new Date(myISODateString)将ISO日期字符串转换为JS日期对象。虽然Firefox和Chrome处理这种转换很好，但Safari会产生“无效日期”错误，而连锁反应只影响一个单独的组件。一旦我纠正了这个日期解析，所有东西在Safari中都被正确地呈现出来了。在这种情况下，我使用Luxon进行转换，我会把它作为解决方案提供。

DateTime.fromISO(myISODateString, { setZone: true }).toJSDate();

长篇回答

我认为这个经验中更有价值的是，我找到了问题所在，因为在你的情况下，可能是Safari的其他特殊性导致了错误。

事实上，正是Frank Provost在这个问题上的评论引导了我走向正确的方向。毫无疑问，较小的组件大多数时候是由它们的props构建的。这就像它们的生命源泉。如果props有误，内部操作和渲染也将出现问题。

因此，我决定在生命周期钩子中控制我非渲染组件接收到的props。当然，在控制台上没有任何输出。所以我往上一级，对父组件的props做了同样的事情。这一次，在控制台上我得到了信息，但在Firefox和Safari之间打印到控制台的内容有所不同。

顺便说一句，在我的情况下，props在创建或挂载时并没有填充，因为它们依赖于异步网络操作。因此，我的控制台调试看起来像这样：

created(){
  setInterval(() => {
    console.log(this.myProp);
  }, 5000, this);
}

长话短说，通过逐个检查组件、变量，我发现我依赖于帮助函数提供的日期，该函数在组件外的帮助文件中，这就是为什么即使多个组件未正确渲染，也没有错误记录到控制台中的原因。

- EmirDev

---

我之前也遇到过类似的问题。 我不得不注释掉页面中的大部分内容，然后逐个插入组件以找出问题所在。 - Henrik Clausen