Vue的VNode将非标准DOM属性分类映射：普通自定义属性（如data-*）归入data.attrs，原生DOM属性（如value、innerHTML）归入data.domProps，内置指令（如v-html、ref、key）由运行时单独处理，确保渲染行为与DOM语义一致。
Vue.js 的虚拟 DOM（VNode）在处理非标准 DOM 属性时，并不简单地“忽略”或“丢弃”，而是依据属性类型和语义进行分类映射：一部分进入 data.attrs，一部分进入 data.domProps，还有部分被 Vue 特殊识别并用于内部行为（如 v-model、ref、key 等）。这种区分直接影响最终真实 DOM 的生成结果和运行时行为。
非标准属性如何归类到 VNode 的 data 结构中
当模板或 render 函数中使用一个 HTML 属性（比如 custom-id="abc"、data-something="123"、x-once="true"），Vue 会根据预设规则决定它该落在 VNode 的哪个字段：
-
普通自定义属性（如
data-*、aria-*、custom-id）→vnode.data.attrs：这类属性会被原样挂载到真实 DOM 元素上，浏览器能读取但不触发特殊逻辑； -
DOM 原生属性（如
innerHTML、textContent、value、checked）→vnode.data.domProps：这些是直接写入 DOM 元素 JS 属性的值，绕过 attribute 机制，优先级高于attrs，且不会出现在 HTML 字符串中； -
Vue 内置指令或保留属性（如
v-html、ref、key、is）→ 不进入attrs或domProps，而是由编译器/运行时单独提取处理：例如v-html会清空children并设置domProps.innerHTML；ref会注册引用而非渲染为属性。
为什么不能全塞进 attrs？
因为 attrs 和 domProps 在底层 patch 过程中走的是不同路径：
-
attrs对应element.setAttribute()，影响 HTML 字符串层面； -
domProps对应element[prop] = value，直接影响 JS 属性状态（如表单控件的value值、input的checked状态）； - 若把
value放进attrs，会导致 input 初始值显示但无法响应后续数据绑定——因为真实 DOM 的value属性只控制初始值，而 JS 属性value才控制实时值。
自定义元素与 Web Components 中的非标准属性
在使用自定义元素（如 <my-button disabled></my-button>）或 Web Components 时，Vue 仍按上述规则处理：
立即学习“前端免费学习笔记（深入）”；
- 布尔属性如
disabled、hidden若存在即为 true，会被正确映射为domProps.disabled = true； - 带值的自定义属性（如
theme="dark"）默认进attrs，除非组件显式声明 prop 接收并转换为domProps； - 如果组件内部通过
this.$attrs透传，那些未被声明为 prop 的非标准属性会作为attrs继续向下传递，保持语义一致性。
开发者可控的映射方式
你可以在 render 函数或 JSX 中显式控制归属：
- 用
attrs: { 'data-id': '123' }→ 写入data.attrs； - 用
domProps: { innerHTML: '<b>hello</b>' }→ 写入data.domProps； - 用
props: { customValue: 'x' }→ 若子组件声明了customValueprop，则走 props 流程，否则可能降级为attrs（取决于inheritAttrs: false设置）。
