Closed
Description
Vue version
3.4.23
Link to minimal reproduction
https://stackblitz.com/~/github.com/KazariEX/vue-inconsistent-v-html
Steps to reproduce
- 预览网页,看到
undefined
和null
- 点击链接切换路由,再次点击切换回主页
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
并不等价。
Metadata
Metadata
Assignees
Labels
No labels