AI 可读性与识别能力对比-TypeDom vs Vue

AI 可读性与识别能力对比

1. 结构识别（AI 解析难度）

方面	TypeDOM	Vue
接口定义	独立 `*.interface.ts`，显式声明所有 props 类型	分散在 `button.ts` defineProps，类型隐式
常量定义	独立 `*.const.ts`，枚举值明确	数组字面量，无类型收紧
类层次	`extends TypeHtml<TdButtonProps>` 继承链清晰	SFC 单文件，`name: 'ElButton'` 字符串标记
Emit 定义	`buttonEmits = { click: (evt) => ... }` 结构化	`defineEmits(buttonEmits)` 仅做运行时验证

2. AI 理解成本

TypeDOM 更易被 AI 解析：

typescript 复制代码

// AI 直接读取 interface就知道所有属性
interface TdButtonProps extends TypeProps {
  size?: MaybeRef<ComponentSize | undefined>;
  disabled?: MaybeRef<boolean>;
  type?: IButtonType;
  loading?: MaybeRef<boolean>;
  // ...
}

// AI 读取 const 就知道有效值
export const buttonTypes: IButtonType[] = [
  'default', 'primary', 'success', 'warning', 'info', 'danger', 'text', ''
]

Vue AI 需要额外步骤：

typescript 复制代码

// AI 需要从 defineProps 的默认值反向推导可选性
withDefaults(defineProps<ButtonProps>(), {
  disabled: undefined,  // AI 需推断 undefined = 可选
  type: '',             // AI 需推断 '' 是有效值还是空字符串
})

3. 语义清晰度

方面	TypeDOM	Vue
响应式语义	`signal()` / `computed()` 明确函数式	`ref()` / `computed()` 但实现是 Proxy
生命周期	`setup()` 方法，语义清晰	`<script setup>` 编译时展开，隐式
插槽	`props.slot` / `props.slots?.loading` 对象访问	`$slots.loading` 运行时查找
条件渲染	`vIf: boolean` 显式	`v-if="loading"` 模板语法糖

4. AI 生成代码能力

从 interface 生成实现：

复制代码

TypeDOM: interface → class 实现（映射清晰）
Vue: defineProps泛型 → SFC模板（需要模板引擎）

从规范生成测试：

复制代码

TypeDOM: 
  - CONSENSUS.md 的 state diagram → 可直接映射到测试用例
  - buttonEmits 定义 → 自动生成 click 事件测试覆盖

Vue:
  - JSDoc @description → 只能提取文本描述
  - 无 formal spec → 无法自动生成验收测试框架

5. 关键差异

维度	TypeDOM (胜出)	Vue
类型系统利用	AI 可直接从 TS interface 推导	AI 需解析 defineProps 默认值推断
模式识别	Class + Hooks 模式固定，AI 容易学习	多种 SFC 组织方式，不固定
双向转换	接口↔实现有明确映射	模板↔逻辑需解析器
Formal Spec	CONSENSUS.md 可直接驱动开发	无对应物

结论

TypeDOM 更适合 AI 工作，因为：

结构化更强：interface/const/class 分离，AI 可逐文件解析
语义更明确 ：signals 的 .get()/.set() 比 Proxy 反推更容易
模式固定：Class + Hooks + Const 三件套，AI 学习一次可泛化
Formal Spec 友好：CONSENSUS.md 等文档可直接被 AI 理解并转换为代码

Vue 的模板语法和 SFC 结构对 AI 来说是黑盒，需要 Vue 特定的解析器才能完整理解。