Vue.js 防止布局跳跃

Question

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

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

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

此示例适用于 CustomTag.vue。这将在 Vue.js 尚未为相应的 Vue.js 组件替换此自定义标签时生效。所以这实际上可以确保即使没有 javascript.

我的布局也是正确的

虽然这可以正常工作，但这离完美的解决方案还很远。我觉得 Vue.js 需要很长时间才能生效，即使它被缓存并放入仅 135KB（gzipped）的单独供应商文件中。

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

Answer 1

这很奇怪，但是对于非常长的模板，引擎必须在渲染之前进行编译，这可能是可能的。

您应该首先考虑预注册您的模板。如果在渲染之前 html 中确实有自定义标签，我猜你不会这样做...... 使用 single file components if you can. If you come from React you can also find jsx for Vue 有用，甚至可以手动编写 render 函数（尽管不推荐）。

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

Vue.js 防止布局跳跃

Vue.js prevent layout jumps

javascript

vue.js

vue-component

vuejs2