Vue3升级至3.4.21后打印组件报innerHTML读取空值错误

我有一个Vue3应用，其中使用了appdisplay组件，需要仅打印该组件（包含其样式与数据）。此前功能正常，但升级Vue至3.4.21后突然失效，报错信息为：Cannot read properties of null (reading 'innerHTML')。可能是什么原因导致的？是否无法再通过ID引用该组件？

相关代码如下：

<script setup>
  import { ref, reactive, nextTick, toRaw, getCurrentInstance} from 'vue';
  import appdisplay from '@/components/appdisplay.vue';

  function printApp(){
      const prtHtml = document.getElementById('print').innerHTML;

      let stylesHtml = '';
      for (const node of [...document.querySelectorAll('link[rel="stylesheet"], style')]) {
        stylesHtml += node.outerHTML;
      }
      const printer = window.open('', '', 'left=0,top=0,width=800,height=900,toolbar=0,scrollbars=0,status=0');
      printer.document.write(`<!DOCTYPE html>
      <html>
        <head>
          ${stylesHtml}
        </head>
        <body>
          ${prtHtml}
        </body>
      </html>`);

      printer.document.close();
      printer.focus();
      printer.print();
      printer.close();

  }

</script>

<template>
  <div>
    <v-btn @click="printApp" >Print</v-btn>

    <appdisplay id='print'></appdisplay>
  </div>
</template>

• Vue 3.4+ 调整了组件标签ID的绑定逻辑：之前版本会自动把组件标签上的id传递给组件的根DOM元素，但3.4之后这个行为被修改了——直接给Vue组件标签加id，不会再自动映射到组件内部的根元素，导致document.getElementById('print')找不到对应节点，返回null触发报错。
• 另外，3.4的模板编译优化可能改变了DOM渲染时机，但核心问题还是ID绑定的规则变化。

推荐两种可靠的修复方式：

方式一：在组件内部给根元素设置ID #

直接修改appdisplay.vue的模板，把id="print"加到组件的根DOM元素上：

<template>
  <!-- 给组件根元素手动添加ID -->
  <div id="print">
    <!-- 组件原有内容 -->
  </div>
</template>

方式二：用Vue的ref获取组件根元素（更符合Vue规范） #

避免直接操作DOM，改用响应式引用获取元素：

1. 父组件模板中给appdisplay添加ref：

<template>
  <div>
    <v-btn @click="printApp">Print</v-btn>
    <appdisplay ref="printRef"></appdisplay>
  </div>
</template>

2. 修改printApp方法，通过ref获取DOM：

<script setup>
import { ref, nextTick } from 'vue';
import appdisplay from '@/components/appdisplay.vue';

const printRef = ref(null);

async function printApp(){
  // 确保DOM已完成渲染
  await nextTick();
  // 获取组件的根DOM元素
  const printElement = printRef.value?.$el;
  if(!printElement) return;

  const prtHtml = printElement.innerHTML;

  let stylesHtml = '';
  for (const node of [...document.querySelectorAll('link[rel="stylesheet"], style')]) {
    stylesHtml += node.outerHTML;
  }
  const printer = window.open('', '', 'left=0,top=0,width=800,height=900,toolbar=0,scrollbars=0,status=0');
  printer.document.write(`<!DOCTYPE html>
  <html>
    <head>
      ${stylesHtml}
    </head>
    <body>
      ${prtHtml}
    </body>
  </html>`);

  printer.document.close();
  printer.focus();
  printer.print();
  printer.close();
}
</script>

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