Vue的VNode不解析XML命名空间前缀，而是依据标签名白名单（如svg、math）和父节点上下文在patch阶段动态创建命名空间元素；自定义标签需显式指定namespace或置于svg父容器内。

Vue.js 的 VNode 标签解析逻辑本身并不直接感知 XML 命名空间（如 svg、math），而是依赖父级上下文与标签名的语义约定来决定是否启用命名空间处理。核心在于：Vue 不在 VNode 创建阶段主动“解析命名空间前缀”，而是在挂载/补丁（patch）阶段，根据当前 DOM 上下文和标签名，动态判断是否应创建带命名空间的元素。

命名空间由父节点隐式继承，而非标签名显式声明

Vue 中的 、 等标签不会因为写成 或加 xmlns 属性就自动触发命名空间创建。真实行为是：

• 当一个 VNode 的标签名是 svg、math、foreignObject 等已知需命名空间的标签，且其父节点为普通 HTML 元素（如 div）时，Vue 在 createElement 阶段会调用 document.createElementNS('http://www.w3.org/2000/svg', 'circle') 而非 createElement
• 若该 VNode 是子节点（例如 在 内），则直接复用父节点的命名空间，无需重复判断
• xmlns 属性在模板中会被忽略（除非手动通过 v-bind 设置），它不参与命名空间推导；Vue 不解析 xmlns:xlink 或前缀映射

自定义标签与命名空间无关，除非显式指定 isInCustomElement

对于非标准标签（如 、），Vue 默认按 HTML 元素处理（即 createElement）。即使你在模板里写成 ，Vue 也不会识别 svg: 前缀——它不是 XML 解析器，不支持命名空间前缀语法。

cn-json-diff

比较两个 JSON 文件并显示差异。支持嵌套结构、数组及值变更。纯 Python 标准库实现，无需 API 密钥。

下载

• 要让自定义标签进入 SVG 上下文，必须确保其父节点是 ，或在渲染函数中手动传入 namespace: 'http://www.w3.org/2000/svg' 选项
• 在 Vue 3 中，可通过 resolveComponent + h 函数显式构造带命名空间的 VNode：h('circle', { namespace: 'http://www.w3.org/2000/svg', ... })
• 编译器对 .vue 单文件中的模板不校验命名空间合法性， 会被当作普通标签名，最终渲染为无命名空间的 HTML 元素

SSR 与服务端渲染保持一致，但不执行 DOM 操作

服务端渲染（SSR）时，Vue 不创建真实 DOM，因此不调用 createElementNS。但它会依据相同规则，在生成字符串 HTML 时插入正确的命名空间属性（如 xmlns="http://www.w3.org/2000/svg"）并保留嵌套语义：

• 根节点会自动注入 xmlns 属性（若未显式设置）
• 子元素如 不再重复添加 xmlns，但保留其作为 SVG 内容的语义
• 客户端 Hydration 时，会比对 SSR 输出的 HTML 结构，并基于相同命名空间规则重建 DOM 节点，确保一致性

关键结论：命名空间是运行时上下文行为，不是编译期语法特性

Vue 的设计哲学是“约定优于配置”：它不引入 XML 命名空间语法支持（如 xmlns:svg、svg:circle），而是通过内置标签白名单 + 父子关系推导来简化 SVG/MathML 集成。这意味着：

• 写 就够了，不用管前缀或 xmlns 属性
• 避免在模板中使用带冒号的标签名（），它们不会被特殊处理
• 需要精细控制时（如动态命名空间、Web Components 混合），应使用渲染函数并显式传入 namespace 选项

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！