Vue3全新API+TS实战饿了么APP1(短信验证/地图定位/POI搜索)

点开这门课之前，先问自己三个问题：你写过 Vue2 的选项式组件吗？你分得清 ref 和 reactive 什么时候该用哪个吗？你在项目里真正接过第三方地图 SDK、处理过手机号验证码倒计时和登录态吗？如果前两个能答上、第三个含糊，这门课就是冲着你来的。

它补的是哪一块能力缺口

不少人学 Vue3 的路径是：看文档知道有组合式 API，写两个计数器 demo，然后继续在项目里用回老写法，或者把 setup 写成选项式的翻版。真到业务里要跟地图、短信、定位这类外部能力对接时，就卡在「数据从哪来、状态放哪、异步怎么串」上。

饿了么这个场景之所以常被拿来练手，是因为它天然把几个难点绑在一起：

• 短信验证码：倒计时、按钮禁用态、请求节流、登录后 token 的保存与携带，涉及的是响应式状态与副作用的配合。
• 地图定位：拿到经纬度只是开始，逆地址解析、坐标拾取、权限失败兜底，考验的是你跟异步接口打交道的耐心。
• POI 搜索：搜索框输入、防抖、结果列表渲染、点击选中回填，本质是「输入 → 请求 → 渲染 → 再交互」的闭环。

这三块都不是 Vue 语法题，而是「框架 + 外部服务」的组合题。课程把它们放进同一个 App 里做，比单独拆成三个小 demo 更接近真实开发的样子。

TypeScript 在这里不是装饰

很多 TS 教程停在前端定义 interface、给函数标参数。这门课值得留意的是：当你在处理短信接口返回、地图 SDK 的回调数据、POI 列表结构时，类型到底帮你挡住了什么。比如地图返回的字段名和你在页面里用的对不上、搜索结果的坐标类型是字符串还是数字，这类问题在 JS 里要跑到运行时才炸，在 TS 里编译阶段就能发现。

看完这部分，你应该能回答：什么情况下值得为第三方 SDK 手写类型声明，什么情况下用 any 反而更省事——而不是无脑全标类型。

跟着做的时候别只抄代码

建议边看边做三件事，比单纯跟敲有效：

• 每实现完一个功能，问自己「如果接口挂了，页面会怎样」。短信发失败、定位被拒绝、搜索无结果，这三种情况的处理往往才是区分 demo 和能上线的代码的地方。
• 把组合式 API 的写法跟 Vue2 的写法对照一遍，尤其是复用逻辑的部分。同一个倒计时逻辑，在选项式里怎么抽，在组合式里怎么抽，体会差别。
• 类型报错别急着关掉或强转，先读懂它到底在说哪个字段对不上。

学完应该能回答的问题

拿下面几个问题自测，如果都能说清楚，这门课的核心就吃到了：组合式 API 里的响应式状态，为什么有时候解构之后就丢失了响应？短信倒计时这类定时任务，组件卸载时该怎么收尾？定位授权失败和定位超时，是同一类错误吗？POI 搜索的防抖，放在输入框事件里还是放在请求层更合适？地图 SDK 的回调数据要怎么和 Vue 的响应式状态接上，才不会出现「数据更新了但视图没动」？

如果这些问题你现在答不上来，说明你缺的不是「再学一遍 Vue3 语法」，而是缺一次把框架、类型、外部服务串起来的完整练习。这门课的价值就在这里：它不是教你 Vue3 有什么，而是让你在饿了么这个具体场景里，把已有语法用出去，顺手补上异步、类型和第三方对接的窟窿。