Bootstrap 和 Tailwind 是 CSS 框架而非组件库，仅提供样式类，不封装交互逻辑与无障碍支持；shadcn/ui 与 Headless UI 虽同属 headless 组件库，但前者源码可控、后者为运行时黑盒；正确接入 Ant Design 表单需对齐受控模式与校验链路；Vue 的 v-model 需显式声明 modelValue prop 和 update:modelValue 事件。
用 Bootstrap 或 Tailwind 时，为什么写个按钮还要查文档？
因为框架不等于组件库——Bootstrap 提供的是预设类名和基础样式规则，Tailwind CSS 更是只提供原子类，两者都不自带可复用的、带逻辑的 UI 组件（比如带下拉菜单的 Dropdown、可拖拽排序的 SortableList）。你写的 button 看似一行搞定，但加上焦点状态、禁用反馈、加载中图标、a11y 属性后，实际要堆 5–8 个 class，还容易漏掉 aria-busy 或 data-state 这类语义标记。
- 纯 CSS 框架（如
Tailwind、Bootstrap CSS）只管“怎么画”，不管“怎么动” - UI 组件库（如
@headlessui/react、Ant Design、shadcn/ui）才封装了状态管理、键盘导航、动画过渡等行为逻辑 - 混用时常见错误：用
Tailwind写样式 + 自己手写useState控制展开/收起 → 最终代码比直接用@headlessui多一倍，且无障碍支持残缺
shadcn/ui 和 Headless UI 的核心区别在哪？
二者都属于“headless”组件库，即不绑定默认样式，但实现路径不同：shadcn/ui 是基于 Radix UI 的 React 组件封装，所有组件都以源码形式存在你的项目里（src/components/button.tsx），你可以直接改；而 @headlessui/react 是运行时包，组件逻辑在 node_modules 里，你只能通过 props 和 className 注入样式。
import { Button } from "@/components/ui/button"
// shadcn/ui：组件文件就在你项目里，可删 props、加 ref、改 onClick 逻辑
import { Disclosure } from "@headlessui/react"
// Headless UI：必须严格按它定义的 render prop 模式使用，扩展需 wrap
-
shadcn/ui适合需要深度定制交互细节的场景（比如让Dialog支持 Esc 关闭 + 点击遮罩关闭 + 按钮聚焦自动跳转） -
@headlessui/react更轻量，升级成本低，适合快速验证原型 - 二者都依赖
Radix UI的底层行为库，所以键盘操作（Tab/Arrow/Space）一致性高，不用自己实现
如何把一个自定义表单控件接入 Ant Design 的表单体系？
关键不是“套样式”，而是对齐 Form.Item 的受控模式和校验链路。Ant Design 的 Form 会自动注入 value、onChange、onBlur，并监听 status 变化触发校验。如果你写的 CustomInput 只接受 value 但没透传 onChange，或者没处理 onBlur 触发校验，就会断链。
const CustomInput = forwardRef(({ value, onChange, onBlur, ...props }, ref) => (
<input
ref={ref}
value={value}
onChange={(e) => onChange?.(e.target.value)}
onBlur={onBlur}
{...props}
/>
))
- 必须用
forwardRef，否则Form.Item无法 focus 到输入框 -
onChange必须接收原始事件并提取值，不能只传 event 对象（Form期望字符串/数字） - 如果组件内部有异步校验（如用户名唯一性检查），需调用
form.validateFields(['username'])主动触发，不能只靠onBlur
为什么用 Vue 的 defineComponent 封装组件时，v-model 不生效？
Vue 3 的 v-model 实际是语法糖，编译后会生成 :modelValue + @update:modelValue。如果你的组件没有声明 modelValue prop，也没有触发 update:modelValue 事件，绑定就只是单向的。
立即学习“前端免费学习笔记（深入）”；
export default defineComponent({
props: {
modelValue: String // 必须显式声明
},
emits: ['update:modelValue'], // 必须显式声明
setup(props, { emit }) {
const handleChange = (e) => {
emit('update:modelValue', e.target.value)
}
return () => <input onInput={handleChange} value={props.modelValue} />
}
})
- 不声明
emits会导致 TypeScript 报错，且开发工具无法识别事件 - 若用
v-model:value自定义修饰符，prop 名要改成value，事件名要改成update:value - 组合式 API 中，
useVModel（来自@vueuse/core）可自动处理双向绑定逻辑，避免手写重复代码
tabIndex 的 div 上。 
