javascript - Vue.js 防止布局跳转

Question

我有几个 Vue.js 组件，这些组件在加载时会导致内容被推到一边。

为了解决这个问题，我创建了一些 CSS 规则，专门针对我的 Vue 组件的自定义 HTML 标签，例如以下组件:

custom-tag {
    float: left;
    width: 150px;
    // etc.
}

此示例适用于 CustomTag.vue。当 Vue.js 尚未将此自定义标签替换为相应的 Vue.js 组件时，这将生效。因此，即使没有 JavaScript，这实际上也可以确保我的布局是正确的。

尽管这可以正常工作，但这仍然远非完美的解决方案。我觉得 Vue.js 即使被缓存并放入只有 135KB(gzipped)的单独 vendor 文件中也需要很长时间才能生效。

我很难为 Vue.js 找到任何真正的解决方案或相关信息，所以我想知道其他人是如何处理这个问题的？这是我的问题吗？JavaScript 加载速度不够快还是其他什么问题？

Answer 1

这很奇怪，但也许对于很长的模板，引擎在渲染之前必须进行编译。

您应该首先考虑预渲染您的模板。我猜如果在渲染之前你的 html 中有自定义标签，你就不会这样做...... 使用single file components如果可以的话。如果您来自 React，您还可以找到 jsx for Vue很有用，甚至可以手动编写渲染函数(尽管不推荐)。

如果你想完全取消第一次渲染的时间，唯一的方法就是 server-side rendering 。因此，您的应用程序将使用已经存在的初始 html 结构。