Vue 3 动态渲染考试题目是基于 JSON Schema 配置驱动的可扩展渲染体系，支持题型动态加载、条件显示、联动校验与富文本等能力。
Vue 3 中动态渲染考试题目，本质是把每道题的结构、类型、选项、校验逻辑等全部交由 JSON 配置驱动，组件按需解析并渲染对应控件。它不是简单用 v-if 切换几个题型，而是构建一个可扩展、可验证、支持联动与嵌套的渲染体系。
题型配置统一用 JSON Schema 描述
每道题用一个对象表示，明确类型（单选、多选、填空、判断、评分、简答等）、标题、提示、是否必答、校验规则、选项来源（静态数组 or 接口）、甚至“显示条件”（如上一题选了 A 才显示本题）。
- 例如单选题配置：
{ "type": "radio", "id": "q1", "label": "Vue 3 的响应式核心是？", "options": [{"value": "Object.defineProperty", "label": "Object.defineProperty"}, {"value": "Proxy", "label": "Proxy"}], "required": true } - 填空题可带正则校验：
{ "type": "input", "id": "q2", "label": "请填写 JavaScript 中声明常量的关键字", "rules": [{ "pattern": "^const$", "message": "答案必须是 const" }] } - 判断题可复用 checkbox，但语义和交互要适配——比如只允许选“对”或“错”，不允许多选
用组件工厂按 type 动态挂载控件
不为每种题型写独立 <QuestionRadio>、<QuestionInput> 等子组件再手动 v-if 切换，而是用一个通用 <QuestionItem> 组件，内部根据 question.type 动态注册并渲染对应表单控件：
- 使用
defineAsyncComponent按需加载题型组件，避免打包体积膨胀 - 通过
<component :is="renderComponent" v-bind="props" @update:modelValue="onInput">统一绑定值与事件 - 所有题型组件都遵循相同接口：接收
modelValue，触发update:modelValue，支持disabled和error状态
支持题目间联动与条件显示
考试中常见“跳题逻辑”或“条件题组”，比如：“若第3题选择‘否’，则隐藏第4–6题”。这需要在渲染前做一次依赖分析：
立即学习“前端免费学习笔记（深入）”；
- 配置中增加
showWhen字段，如{ "q3": "false" }表示当 q3 的值为false时才显示本题 - 渲染器遍历题目列表时，调用一个
shouldShow(question, answers)函数实时判断可见性 - 利用
watch监听已答题数据变化，自动触发展开/收起，无需手动维护响应式依赖
验证与提交逻辑集中管理
考试提交前需整体校验：必答题是否作答、填空格式是否合法、多选是否超限等。不建议每个题自己校验后汇总，而应：
- 为每道题定义
validate(value)方法（可在配置里写函数字符串，或在组件内实现） - 提交时遍历所有已显示题目，逐个调用验证，收集错误信息并定位到具体题号
- 支持“交卷前高亮未答必答题”，也可实现“每题答完即时校验”（如填空输完失焦即提示）
不复杂但容易忽略：题干富文本（含公式、图片）、选项乱序（防作弊）、答题限时倒计时嵌入、以及离线缓存作答进度——这些都可以在统一配置层加字段，在渲染器中按需启用。核心还是守住“配置即契约”的原则，让业务侧改题、增题、调逻辑，都不用动一行组件代码。
