如果你正在学 vue，又觉得光看文档太枯燥、练手找不到方向，那这个叫vuejs-challenges的开源项目，说不定能帮上大忙。
简单说，这是一个专门为 Vue 学习者打造的 “闯关练习场”—— 作者因为特别喜欢 Vue，想找个能让大家一起学习的项目，于是就有了它。核心目的很实在：帮你把 Vue 的知识点嚼碎了、练透了，不管是理解 Vue 底层逻辑、自己写实用工具，还是单纯找乐子练手，在这儿都能找到方向。而且它不只是个练习库，还想搭个小社区，你在实际开发里遇到的问题，不管有没有答案，都能在这儿聊，说不定你的问题还会变成新的练习题，让更多人一起讨论解决。
核心内容：按难度分好类的 Vue 闯关题
项目里的挑战题都按难度标得清清楚楚，从入门到进阶，新手也能循序渐进，不会一上来就被难住。
1. 难度分级，新手友好
- 热身题（warm-up）：就 1 道 “Hello World”，帮你快速熟悉项目的答题模式，就算刚接触 Vue 也能轻松上手。
- 简单题（easy）：13 道基础题，全是 Vue 日常开发里最常用的知识点，比如 ref 全家桶怎么用、为什么数据会丢响应式、计算属性怎么写才可变、watch 怎么监听数据变化，还有生命周期钩子、Prop 验证这些必考点，练完基本能搞定日常开发里的基础需求。
- 中等题（medium）：14 道进阶题，偏向实用技巧和 api 深入应用。比如怎么写一个useToggle（切换状态的组合式函数）、useLocalStorage（本地存储的工具函数），怎么自定义指令（像输入框自动聚焦的v-focus、防抖点击的v-debounce-click），还有渲染函数h()怎么用，这些都是能直接用到项目里的实用技能。
- 难题（hard）：5 道深度题，适合想拔高的同学。比如怎么自定义 ref、怎么实现v-model指令、怎么写一个树形组件（Tree Component），甚至涉及 Web Components 相关的自定义元素，能帮你理解 Vue 更底层的逻辑。
2. 按 “标签” 找题，针对性练习
如果想专门补某个知识点，不用在所有题目里翻找 —— 项目给每道题都贴了 “标签”，比如你想练 “组合式 API”，点对应的标签，就能看到 ref、watch、effectScope 这些相关的题目；想练 “自定义指令”，也能直接找到v-focus、v-debounce-click等题目，针对性特别强。
常见的标签和对应内容可以看下面：
| 标签类别 | 包含的典型题目 | 适合练习场景 |
|---|
| #Composition API（组合式 API） | ref 全家桶、watch 监听、依赖注入、生命周期 | 想吃透 Vue3 核心的组合式 API 用法 |
| #Directives（指令） | 自动聚焦 v-focus、防抖点击 v-debounce-click、自定义 v-model | 需要自定义指令解决项目实际需求 |
| #Composable Function（组合式函数） | useToggle（状态切换）、useCounter（计数器）、useMouse（监听鼠标位置） | 想封装可复用的工具函数 |
| #Components（组件） | 函数式组件、渲染函数 h ()、树形组件 Tree Component | 想提升组件开发能力，尤其是复杂组件 |
| #reactivity:Advanced（响应式进阶） | shallow ref、Raw API、effectScope | 想理解 Vue 响应式的底层原理，解决响应式相关的 “坑” |
能怎么用？适合这些场景
- Vue 新手入门练手：刚学完 Vue 基础，不知道怎么巩固？从简单题开始刷，每道题都是一个小知识点，练完能把 “纸上谈兵” 变成实际代码能力。
- 开发人员查漏补缺：工作中偶尔用到某个 API（比如 effectScope、until），总记不清怎么用？找对应的题目练一遍，比翻文档印象深多了。
- 封装工具函数参考：想自己写useLocalStorage、useMouse这类常用工具？项目里的题目会给你思路，甚至能参考其他开发者分享的解法。
- 解决实际开发问题：开发时遇到 “怎么阻止事件冒泡”“动态 css 怎么写”“树形组件怎么实现” 这些问题？可以在对应的题目里找思路，还能在社区里和别人讨论。
- 参与开源贡献：如果你有好的解题思路，能提新的练习题，甚至想给现有题目加测试用例，都能通过提 issue 参与进来 —— 就算是分享自己遇到的开发难题，也能帮到更多人。
其他值得说的点
- 支持中英文：项目有英文和简体中文两种 README，不管你习惯看哪种语言，都能轻松了解规则。
- 依赖靠谱工具：它的实现多亏了 Vue 官方的vuejs/repl（在线编辑器），答题体验流畅；而且参考了很火的type-challenges（TypeScript 练习库）的模式，结构清晰，用起来很顺手。
- 免费开源：基于 MIT 协议，不管是自己用、改代码，还是分享给别人，都没有限制。
总的来说，这不是一个冷冰冰的文档库，更像一个 “Vue 学习互助小组”—— 既有分好类的练习题帮你巩固知识，又能和其他开发者交流问题，不管你是刚入门还是想进阶，都能在这儿找到自己的位置。
仅供个人学习参考/导航指引使用，具体请以第三方网站说明为准，本站不提供任何专业建议。如果地址失效或描述有误，请联系站长反馈～感谢您的理解与支持！
链接: https://fly63.com/nav/4495
