Vue预闪

Question

我现在有以下解决方案：

<template>
    <section id="prod-main">
        <prod-preview v-for="prod in products" :id="prod.id" :key="prod.id"/>
    </section>
</template>

export default {
...
    computed: {
        products: function () {
            return this.$store.getters['products/getPreview']
        }
    }
...
}

Vuex商店将收到信息后，从我的后端延迟一些。所以一开始它是空的。现在我想使用vue spa预警机，这里我看到一个闪烁。

据我所知，它的工作原理如下：

1. 浏览器用产品加载HTML
2. 执行js，因为商店是空的，所以不用任何东西替换产品。
3. 经过一段时间的延迟，它再次显示了后端信息。

我怎么才能修好它？我应该留下预存的索引，我不能硬编码后端回复。

Answer 1

在保存页面的html之前，可以使用设置captureAfterTime等待异步调用完成。

还有其他设置：

    // NOTE: Unless you are relying on asynchronously rendered content,
    // such as after an Ajax request, none of these options should be
    // necessary. All synchronous scripts are already executed before
    // capturing the page content.

    // Wait until a specific event is fired on the document.
    captureAfterDocumentEvent: 'custom-post-render-event',
    // This is how you would trigger this example event:
    // document.dispatchEvent(new Event('custom-post-render-event'))

    // Wait until a specific element is detected with
    // document.querySelector.
    captureAfterElementExists: '#content',

    // Wait until a number of milliseconds has passed after scripts
    // have been executed. It's important to note that this may
    // produce unreliable results when relying on network
    // communication or other operations with highly variable timing.
    captureAfterTime: 5000,

另一个问题可能与预录制的HTMl如何被水化有关，我已经在github上打开了一个问题，但是他们仍然没有解决它(而且不愿意?) https://github.com/chrisvfritz/prerender-spa-plugin/issues/131。

解决方案是在预录制的html中将data-server-rendered="true"添加到vuejs父节点，如下所示：

<div id="root" data-server-rendered="true">...

您可以使用选项postProcessHtml这样做。

Answer 2

我不知道我是否理解您的问题，但您是否试图添加一个v-if以避免闪烁：

<template>
    <section id="prod-main">
        <prod-preview
            v-if="products.length > 0" 
            v-for="prod in products" 
            :id="prod.id" 
            :key="prod.id"/>
    </section>
</template>