Vue3 defineModel + Vitest 覆盖率 80% 流水账

背景

defineModel 是 Vue 3.4 的新语法糖，可以一行代码实现双向绑定，但官网例子太简单，我想在真实组件里测一遍，同时把单元覆盖率拉到 80%。

做法

1. 用 <script setup> + defineModel 封装 Counter 组件：vue复制
2. 测试用例写在 Counter.test.ts，用 Vitest + @vue/test-utils：TypeScript复制
3. pnpm test --coverage → 自动生成覆盖率报告
4. 把 < 80 % 的分支补齐，直到终端变绿。

结果

• 1 个组件，5 个用例，Statements 82 %
• Vitest 运行速度 < 1 s，CI 同样一次过
• 徽章直接贴在 README，HR 一眼看懂。

源码地址

https://github.com/web-code-hub/gap-2024

Badge: https://gap-2024-saas.netlify.app/badges/coverage.svg