Vue编译器提升时表格元素为何不可字符串化？

这些被标记的元素（caption、thead、tr、th、tbody、td、tfoot、colgroup、col）都是表格专用的嵌套子元素，它们的DOM结构有严格的层级限制：

• <tr>必须作为<table>、<thead>、<tbody>或<tfoot>的直接子元素存在
• <td>/<th>必须作为<tr>的直接子元素存在
• <col>/<colgroup>必须作为<table>的直接子元素存在

Vue的可字符串化逻辑是通过将元素HTML字符串插入到临时包装DOM（比如<div>）的innerHTML来快速生成节点，以此提升性能。但如果尝试把这些表格子元素直接插入到普通容器的innerHTML中，浏览器会触发DOM自动修正机制：浏览器会识别到这些元素处于非法的父容器下，直接剥离或修改它们的结构，最终生成的DOM和预期完全不符。

举个直观的例子：

const div = document.createElement('div')
div.innerHTML = '<tr><td>test</td></tr>'
console.log(div.innerHTML) // 实际输出为<td>test</td>，<tr>被浏览器自动丢弃

正因为这个原因，Vue必须禁止这些元素通过字符串化的方式处理，强制使用标准的createElement API逐个创建节点并组装，以此保证表格结构的正确性——牺牲一点性能来避免渲染错误。

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