Vue中直接写HTML全局属性会失效，必须用v-bind显式绑定；contenteditable等布尔属性需绑定布尔值；组件需设inheritAttrs:false并v-bind="$attrs"透传；注意IE11和SSR兼容性。
Vue中直接绑定HTML全局属性会失效吗？
不会失效，但必须用 v-bind（或简写 :）显式绑定，不能直接写在标签上当静态属性用。Vue模板编译器会过滤掉未声明的属性，尤其是像 data-* 、aria-* 、tabindex 这类非 Vue 指令也非原生 prop 的属性——如果你没绑定，它们根本不会出现在最终渲染的 DOM 上。
常见错误现象：<div data-id="123" aria-label="close"> 在 Vue SFC 里写成这样，运行时 DOM 中查不到 data-id 或 aria-label；原因是 Vue 默认只透传已知 prop（如 class、style），其余需显式绑定。
- 静态值用
:data-id="'123'或v-bind:data-id="'123'" - 动态值直接
:aria-label="tooltipText"，响应式更新自动同步 - 注意引号嵌套：避免
:data-config="{foo: 'bar'}"写成双引号套双引号导致语法错误，推荐用单引号包裹字符串值
哪些HTML全局属性在Vue中需要特别处理？
contenteditable、draggable、spellcheck 这类布尔属性，在 Vue 中不能只写属性名，必须显式绑定布尔值，否则会被忽略（Vue 3 行为更严格）。例如 <div contenteditable> 在模板中等价于 contenteditable="true"，但 Vue 不认这种隐式写法。
- 正确写法：
:contenteditable="isEditable"或:draggable="canDrag" - 错误写法：
contenteditable（无绑定）、:contenteditable=""（空字符串 → false，但语义不清） -
tabindex是数值属性，要绑定数字类型：:tabindex="isActive ? 0 : -1"，不要写成字符串"0"（虽然 DOM 渲染看起来一样，但类型不一致可能影响 focus 管理逻辑）
Vue组件封装时如何安全透传全局属性？
自定义组件（比如 <MyButton>）默认不接收或透传任何 HTML 全局属性，除非你主动启用 inheritAttrs: false 并手动挂载。否则 data-* 、aria-* 会悄悄丢失，导致可访问性降级或埋点失效。
立即学习“前端免费学习笔记（深入）”；
典型场景：封装一个带 icon 的按钮，外部想加 data-track-id="submit-click" 做行为埋点，但组件内部没处理，该属性就消失了。
- 在组件选项中设
inheritAttrs: false - 在模板根元素上用
v-bind="$attrs"手动透传所有未声明的属性 - 如果组件有多个根节点（如含 wrapper 和 inner），只能选一个节点挂
v-bind="$attrs"，其余节点需按需解构（如:aria-label="$attrs['aria-label']"） - 注意：
$attrs不包含class和style（Vue 自动合并到根元素），也不包含已声明的 props
使用 v-bind 绑定全局属性时性能和兼容性要注意什么？
绝大多数情况下无性能负担，Vue 的响应式系统只在依赖变化时触发更新。但有两个容易被忽略的点：
- 频繁变更的
data-*属性（如每秒更新的data-timestamp）会触发 DOM 属性重写，虽不影响 layout，但可能增加 DevTools 检查开销；建议只在必要时绑定 - IE11 下部分
aria-属性（如aria-current）需确保值是字符串而非布尔值，:aria-current="isActive"在 IE11 可能渲染为aria-current="true"，而某些读屏器期望"page"或"true"字面量，需根据具体需求校验 - SSR 场景下，服务端渲染时
$attrs与客户端不一致可能导致 hydration mismatch，尤其当服务端未传入某些data-属性而客户端动态补上时
真正麻烦的不是怎么写，而是忘记检查最终 DOM 是否真的存在那些属性——尤其在跨团队协作或接入第三方 SDK 时，data- 埋点和 aria- 可访问性属性一旦缺失，问题往往延迟暴露。建议在组件测试里加一句 expect(wrapper.element.getAttribute('data-id')).toBe('123')。
