Vue中v-if/v-else块内PdfViewer组件出现重复渲染问题

1. 响应式变量resp的初始值不符合首次渲染的真实判断条件：你没有在组件初始化阶段就给resp赋值为真实窗口宽度，通常初始值会设为0/undefined，所以组件首次渲染（mounted钩子执行前）时，resp < 1023，会先走v-else分支渲染一次PdfViewer。等组件挂载完成触发mounted钩子，你给resp赋值为真实的大于1023的窗口宽度，触发响应式更新，此时会销毁v-else分支的组件，同时创建v-if分支的PdfViewer实例，前后两次创建实例就会出现你观测到的“渲染两次”的现象。如果窗口宽度小于1023，mounted赋值后resp仍小于1023，不会触发分支切换，所以只会渲染一次。
2. 若PdfViewer组件内部存在挂载时向全局插入DOM、绑定全局事件且销毁时未清理的逻辑，旧组件实例的残留DOM也会看起来像是组件被重复渲染。

• 方案1：将resp的赋值逻辑提前到组件初始化阶段，避免首次渲染后触发分支切换
  直接在data中初始化resp为真实窗口宽度即可，无需再在mounted中重复赋值，这样首次渲染就能拿到正确的判断条件，不会触发后续的分支切换和重复渲染：

data() {
  return {
    resp: window.innerWidth
  }
}

• 方案2：给两个分支的PdfViewer添加唯一key，明确区分组件实例
  如果确实需要保留两个分支的写法，可以给两个PdfViewer设置不同的key，告诉Vue这是两个独立组件，避免异常复用，同时也能强制旧实例完全销毁：

<div v-if="resp > 1023">
    <PdfViewer key="large-screen" />
</div>
<div v-else>
    <PdfViewer key="small-screen" />
</div>

• 方案3：合并分支逻辑，复用同一个PdfViewer实例
  从你给出的代码来看，两个分支的差异仅在外层div，内部的PdfViewer没有区别，完全可以把条件判断移到外层属性上，只保留一个PdfViewer，从根源上避免重复渲染的可能：

<div :class="resp > 1023 ? 'large-wrapper' : 'small-wrapper'">
    <PdfViewer />
</div>

如果外层div还有其他属性差异，也可以用类似的动态绑定方式处理。

内容的提问来源于stack exchange，提问作者user16732355