Vue 组件与响应式规范

要解决什么问题

在现有 Vue 3 仓库里改 SFC、删条件分支或合并展示逻辑时，常见问题不是「能不能跑」，而是 响应式链路越改越绕：多余的 computed 透传、reactive 与 ref 混用、删了分支却留着旧类型和兼容函数，类型检查过了但语义已经变了。

本技能在命中后 强制执行全文规则，不允许只改模板或只回答问题就跳过收口步骤。

技能如何约束改动

• 文件与 API 习惯：.vue 区块顺序固定为 template → script → style；保持现有 script setup、Composition API、TypeScript，不擅自换风格。
• 响应式选型：只需替换整对象/数组时用 shallowRef / shallowReactive；需要跟踪字段深层变化时，用 同一个 reactive 对象直接改字段，避免中转层。
• 去冗余：禁止 computed(() => otherComputed.value) 这类无派生逻辑的包裹；删分支后合并单层 computed 或直接引用原响应式值。
• 模板与组件：图片不在 script 里 import，在 template 用 v-if 控制；DOM 引用优先 useTemplateRef；双向绑定优先 defineModel，不把 const reactive(...) 整对象当作组件级 v-model 绑定目标。

修改后强制收口（不可跳过）

1. 从 diff 列出语义变化的字段、函数、类型与响应式变量，并 全仓库搜索 定义与调用点。
2. 清理失去独立语义的 computed、中间变量、旧联合类型与纯透传函数（如只返回入参或已无意义的 String() / Number()）。
3. 编译通过不能替代 上述检索与清理；未完成不得宣告任务完成。

适用边界

仅覆盖当前仓库内的 Vue 组件与响应式相关改动；非 Vue 专属习惯仍遵循 frontend-global。多个 skill 同时命中时规则叠加执行。