Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
KazariEX opened this issue Apr 17, 2024 · 0 comments
Closed

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

KazariEX opened this issue Apr 17, 2024 · 0 comments

Comments

@KazariEX
Copy link

Vue version

3.4.23

Link to minimal reproduction

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

Steps to reproduce

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

What is expected?

首次进入主页时(SSR),没有 undefinednull

What is actually happening?

首次进入主页时(SSR),v-htmlundefinednull 作为字符串渲染在了 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 并不等价。

@github-actions github-actions bot locked and limited conversation to collaborators May 3, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant