多次渲染的组件

Question

我正在使用 v-if-statement 分隔块，例如：

<div v-if="resp > 1023">
    <PdfViewer />
</div>

<div v-else>
    <PdfViewer />
</div>

我遇到的问题是在较小的屏幕宽度上查看它时，PdfViewer 会被渲染一次。在超过 1023px 的宽度上，即使第二次提及它是在 if-else 块中，它也会被渲染两次。它里面的其他 html 元素没有显示，但组件是。

Resp 是挂载时的屏幕宽度：

    mounted() {
        this.resp = window.innerWidth;
        console.log(this.resp);
    }

Answer 1

我通过在创建的生命周期钩子中分配值来解决它，因此在 v-if 评估之前设置了值。

created() {
    this.resp = window.innerWidth;
    console.log(this.resp);
}