Skip to content

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

Description

@KazariEX

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 并不等价。

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Fields

    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions