Vue3-beta抢先学

如果你现在的项目还停在 Vue 2 的 Options API 上，看到 Vue 3 的 Composition API、setup、ref 这些词只能含糊带过，那这套课就是给你补这块的。它讲的是 Vue 3 beta 阶段的内容，也就是说，很多后来才定稿的写法在这里还是早期形态——这既是它的价值，也是需要你提前知道的前提。

先确认你缺的是哪一块

Vue 3 带来的变化不是加几个新 API 那么简单，它同时动了几层东西：响应式底层从 Object.defineProperty 换成了 Proxy，组件逻辑的组织方式从选项式转向组合式，配套的路由和状态管理也各自升级到了新版本。这三层里，不同人的缺口不一样。

• 写过 Vue 2，但没系统用过 setup：你的缺口在组合式写法和逻辑复用（自定义组合函数），而不是语法本身。
• 只会照着文档抄 ref / reactive：你的缺口在响应式原理——为什么解构会丢响应性、什么时候该用 toRefs。
• 能写页面但没搭过完整工程：你的缺口在路由、状态管理和构建工具这条链路上。
• 纯粹想看看 beta 版长什么样：那你得接受它和正式版存在差异，学的时候心里要有数。

这门课覆盖的是前两类偏基础的部分，顺带铺垫第三类。如果你的缺口是第四类之外的东西，比如服务端渲染或性能调优，这门课帮不上。

这门课会碰到的具体内容

课程围绕 Vue 3 的核心特性展开，落点大致在几处：组合式 API 的基本用法，包括 setup 的执行时机、ref 与 reactive 的区别、computed 和 watch 在组合式下的写法；组件层面的变化，比如多根节点、Teleport、异步组件的处理；以及配套的 Vue Router 和状态管理在 Vue 3 下的接入方式。因为讲的是 beta 版本，一些 API 的名称和参数可能与你现在查到的官方文档不一致，遇到冲突时以你实际使用的版本为准，别硬套。

怎么练才算没白看

组合式 API 最容易出现的问题是“看懂了但写不出来”，因为它把逻辑从选项的位置约束里解放了出来，反而更依赖你自己的组织能力。建议每个知识点都落成小练习：

• 拿一个 Vue 2 的列表组件，用 setup 重写一遍，重点体会数据、方法、生命周期怎么放。
• 把一段可复用的逻辑抽成自定义组合函数，比如“带防抖的搜索”，在两个组件里各用一次。
• 故意写一次解构丢响应性的代码，再修好它——亲身踩过比记住结论管用。
• 配一个最小路由 + 一个全局状态，跑通一次数据从状态到页面的完整流向。

做这些练习不需要完整项目，单个页面甚至单文件就够。关键是把每个新 API 都写到自己手顺为止。

看完你应该能回答的问题

用几个问题自测，答不上来就回去补对应部分：setup 里为什么不能直接用 this？ref 和 reactive 各自适合什么场景？为什么解构 reactive 对象后响应性会断，而 ref 不会？组合式 API 相比选项式，真正的优势体现在哪类代码里？Vue 3 的路由和状态管理，接入方式和你之前用的版本差在哪？

能把这些讲清楚，说明你已经从“会用”往“知道为什么”走了一步。beta 阶段的知识会过时，但这一层理解不会。