v-html 在 SSR 与 CSR 时的表现不一致

[KazariEX]

Vue version

3.4.23

Link to minimal reproduction

https://stackblitz.com/~/github.com/KazariEX/vue-inconsistent-v-html

Steps to reproduce

1. 预览网页，看到 undefined 和 null
2. 点击链接切换路由，再次点击切换回主页
3. undefined 和 null 消失

What is expected?

首次进入主页时（SSR），没有 undefined 和 null

What is actually happening?

首次进入主页时（SSR），v-html 将 undefined 和 null 作为字符串渲染在了 innerHTML 中

System Info

System:
  OS: Windows 10 10.0.19045
  CPU: (12) x64 11th Gen Intel(R) Core(TM) i5-11400F @ 2.60GHz
  Memory: 4.11 GB / 15.87 GB
Binaries:
  Node: 21.7.1 - D:\Program Files\nodejs\node.EXE
  Yarn: 1.22.22 - D:\Program Files\node\node_global\yarn.CMD
  npm: 10.5.0 - D:\Program Files\nodejs\npm.CMD
  pnpm: 9.0.1 - D:\Program Files\node\node_global\pnpm.CMD
Browsers:
  Edge: Chromium (123.0.2420.97)
  Internet Explorer: 11.0.19041.3636

Any additional comments?

v-html 的值在 SSR 时会将原始值直接放入插值语法中，这会触发 String 类型的隐式转换；而对 DOM 元素设置 innerHTML 时，null 值会被处理为空字符串，两者表现并不一致；在 CSR 时，undefined 值会被处理为空字符串，而 innerHTML 的原生效果是转换为字符串后输出——文档中的 “更新元素的 innerHTML” 并不准确。

同理，v-text 在渲染 null 值时也有同样的问题，Vue 的文本插值语法与 textContent 并不等价。