多次渲染的组件

Question

我用 v-if 语句分隔块，例如：

<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);
}