javascript - VueJS 不在 Safari 中渲染

Question

Safari 没有呈现我在 VueJS 中构建的单页应用程序。

我花了 2 周时间开发它。它包含根据用户点击显示或不显示的组件。以及通过“v-for”元素呈现的数据对象。

在 chrome 中，一切都完美无缺!!在 mozilla 中也...在 safari 中，列表不显示。为什么 safari 不渲染任何东西？我什至无法调试它..

我查找了解决方法，例如 polyfills ......但这些似乎不受 safari 的支持......所以实现它们没有意义。

会喜欢一些支持或见解的家伙..如果没有解决方法这是否意味着我必须回去用 JS + Jquery 构建它？

提前致谢

Answer 1

所以，我有同样的问题。意思是，一系列用 v-for 列出的组件，但仅在 Safari(在 Mac 上)中不呈现在屏幕(或 DOM)上，即使它在 Firefox 和 Chrome(甚至在 Mac 上)上工作得很好。经过漫长而艰苦的尝试，我能够解决这个问题。我将分两部分给出答案。
快速解答
在我的情况下，渲染错误是日期转换在我的帮助文件中的代码深处出现错误的最终结果。事实上，在这个文件中，我收到了一个字符串格式的 ISO 日期，并通过 new Date(myISODateString) 将其转换为 JS 日期对象。 .虽然 Firefox 和 Chrome 可以很好地处理这种转换，但 Safari 会产生“无效日期”错误，并且链式 react 只影响单个组件。一旦我更正了这个日期解析，一切都在 Safari 中正确呈现。在这种情况下，我使用 Luxon 进行转换，我将其作为解决方案

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

长答案
我认为在这次经历中更有值(value)的是我如何发现这是问题所在，因为在您的情况下，可能是 Safari 的其他一些特殊性导致了错误。
实际上，正是弗兰克·普罗沃斯特对这个问题的评论引导我朝着正确的方向前进。
不用说，较小的组件大部分时间都是由它们的 props 构建的。这就像他们的生命之源。如果 props 出错，内部操作和渲染也会出现问题。
所以我决定在生命周期钩子(Hook)中控制我的非渲染组件正在接收的 Prop 。当然，控制台没有打印任何内容。所以我上一层楼，对父组件的 props 做了同样的事情。这一次，我在控制台中获取信息，但在 Firefox 和 Safari 之间打印到控制台的内容有所不同。
顺便说一句，在我的案例中， Prop 没有在创建或安装时填写，因为它们依赖于异步网络操作。所以，我的控制台调试看起来像这样；

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

长话短说，通过这种方式，组件到组件，变量到变量，我发现我依赖于我的帮助函数在我的组件外部的帮助文件中提供的这个日期，这就是为什么没有错误记录到即使没有正确呈现多个组件，也可以在运行时使用控制台。