1. Vue3 前世今生：从 Vue2 到 Vue3 的架构演进、Composition API 的设计哲学、Vue3 的生态圈概览
大家好，我是这门课的主讲人。咱们直接进入正题——Vue3 到底是怎么来的？它跟 Vue2 比，到底牛在哪？
说实话，我从 Vue2 时代就开始用了。那时候觉得 Vue2 真香，上手快、文档好、社区活跃。但用着用着，问题就来了。尤其是做大项目时，组件逻辑一多，mixin 满天飞，代码像一团乱麻。嗯，这就是 Vue3 要解决的核心问题。
1.1 从 Vue2 到 Vue3：架构演进
Vue2 的底层是基于 Object.defineProperty 做的响应式。这个 API 有个硬伤——它没法监听数组下标的变化，也没法拦截新增属性。我在项目中遇到过，给对象动态加个字段，视图死活不更新。最后只能靠 Vue.set 救场，很别扭。
Vue3 换成了 Proxy。这玩意儿是 ES6 的，能直接代理整个对象。你想想看，新增属性、删除属性、数组操作，全都能被拦截到。说白了，响应式更彻底了，代码也更干净了。
核心变化对比：
| 对比项 | Vue2 | Vue3 |
|---|---|---|
| 响应式原理 | Object.defineProperty | Proxy |
| 性能 | 中等 | 提升 1.3~2 倍 |
| Tree-shaking | 不支持 | 原生支持 |
| TypeScript | 勉强支持 | 一等公民 |
还有一个容易被忽略的点——Vue3 的虚拟 DOM 重写了。它用了静态标记（PatchFlag），编译时就能知道哪些节点是动态的。运行时只对比动态部分，省了很多无用功。我做过一个表格组件，Vue3 版本比 Vue2 快了将近一倍。
1.2 Composition API 的设计哲学
这是 Vue3 最让我兴奋的部分。Vue2 用的是 Options API，也就是 data、methods、computed 这些选项。小项目还行，大项目就尴尬了——一个功能的逻辑散落在各个选项里，看代码得上下翻。
Composition API 的思路很简单：按功能组织代码，而不是按选项。你可以把相关的响应式数据、方法、计算属性写在一起，然后封装成一个 useXxx 函数。
举个例子，一个搜索功能：
// Vue2 风格
export default {
data() {
return { keyword: '', results: [], loading: false }
},
methods: {
async search() {
this.loading = true
this.results = await fetch(...)
this.loading = false
}
}
}
// Vue3 风格
export function useSearch() {
const keyword = ref('')
const results = ref([])
const loading = ref(false)
async function search() {
loading.value = true
results.value = await fetch(...)
loading.value = false
}
return { keyword, results, loading, search }
}你看，逻辑一目了然。而且这个 useSearch 可以在任何组件里复用。我曾经在三个不同的页面里用了同一个搜索逻辑，改一处就全改了，爽得很。
我的建议：别一上来就把所有东西都塞进 setup 里。先按功能拆成几个 useXxx，每个函数只做一件事。这样代码可读性会好很多。
为什么会设计 Composition API？尤雨溪说过，Vue2 的 Options API 在逻辑复用上太弱了。mixin 有命名冲突，scoped slot 又太啰嗦。Composition API 本质上就是函数式编程的思路——把状态和行为封装成纯函数，想用就引入。
1.3 Vue3 的生态圈概览
生态圈这块，我简单梳理一下。你心里有个谱就行。
- Vue Router 4：跟 Vue3 深度绑定，支持 Composition API 风格的路由守卫。我在项目中用
useRouter和useRoute，比 Vue2 的this.$router顺手多了。 - Pinia：Vue3 官方推荐的状态管理。说白了就是 Vuex 的升级版，去掉了 mutations，API 更简洁。我建议新项目直接上 Pinia，别再用 Vuex 了。
- Vite：开发服务器秒启动，热更新快到飞起。我刚开始用 Vite 时还怀疑，结果一试就回不去了。Webpack 打包慢的问题，在 Vite 这里基本不存在。
- Element Plus / Naive UI：组件库全面拥抱 Vue3。我个人偏爱 Naive UI，TypeScript 支持好，样式也现代。
避坑指南：我曾经在 Vue3 项目里用了 Vue2 的第三方库，结果各种报错。记住，Vue3 不兼容 Vue2 的插件。选库时一定要看它是否标注了 "Vue3 compatible"。
还有一个趋势——Vue3 的 TypeScript 支持是原生级别的。你写 defineComponent 时，类型推断会自动生效。我团队现在所有新项目都强制用 TypeScript + Vue3，开发效率反而更高了，因为 IDE 提示更准确，bug 也少了很多。
嗯，这一章就聊到这。Vue3 不是简单的版本升级，而是一次架构重构。理解了它的设计哲学，后面学 Composition API 和组件化开发时，你会觉得顺理成章。
下一章，咱们手写第一个 Composition API 组件。到时候见。