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 过程中走的是不同路径：
Ainative Vue Sdk
下载
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
-
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设置）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
