前端框架可自定义属性，为何自定义属性需加data-前缀？

核心原因很简单：框架的模板不会直接以原始形式交给HTML校验器或浏览器解析，而是先经过了编译转换流程：

• 框架里的v-for这类属性属于专属语法糖，不是标准HTML。以Vue为例，.vue文件里的模板、页面中的<template>标签内容，会被框架编译器先处理成JavaScript的render函数，最终渲染到页面的真实DOM里，根本不存在v-for、v-if这类属性——这些指令都被转换成了对应的DOM操作逻辑。

• 你直接写的<div something>是作为原始HTML提交给校验器的，而HTML规范明确要求自定义属性必须以data-前缀开头，所以校验器会报错。但框架的模板内容，要么是在非HTML类型的文件/标签里（比如.vue文件、type="text/x-template"的script标签），要么构建工具打包时就把模板转换成了标准代码，校验器根本看不到那些非标准属性。

• 退一步说，就算开发阶段框架会保留模板里的指令属性，浏览器本身对HTML的解析是宽容的——它会忽略无法识别的属性，但HTML校验器是严格遵循规范的。不过框架通常会和校验工具（比如ESLint搭配vue-eslint-parser）做适配，让校验器能识别框架语法，不会误报。

说白了，框架不是“规避”或“忽略”规则，而是它们的模板语法本身就不属于标准HTML范畴，会先被转换成符合规范的代码，再交付给浏览器和校验器。

内容的提问来源于stack exchange，提问作者Nick