Vue 3 概览与生态升级

这篇文章将全面讲解 Vue 3 的核心变化及其生态升级，帮助刚入门的朋友快速理解并上手 Vue 3 开发。

🎯 引言

学会这篇文章，我能了解 Vue 3 相较于 Vue 2 的核心区别和优势，掌握最新的全局 API 用法，学会用当前主流的 Vite 快速搭建 Vue 3 项目，并理解项目目录结构和热更新机制，助力你快速进入现代前端开发节奏。

✨ 为什么要学习 Vue3

Vue 3 作为 Vue.js 的全新大版本，带来了许多性能优化和全新的 API，成为现代前端开发的热门选择。学习 Vue 3 不仅能帮助你写更高效、可维护的代码，还能用上 Composition API 等强大工具，拆分组件逻辑，提升代码复用率。

此外，Vue 3 对 TypeScript 的支持更好，也适配了新的打包工具如 Vite，使得开发体验更加顺畅。未来的新项目和主流开源库都将围绕 Vue 3 生态展开，掌握它是前端工程师的必备技能。

Vue 3 不同于之前版本，它不仅是简单的升级，而是底层架构和 API 的重塑，所以有必要重新学习和理解。

🔄 与 Vue 2 的主要区别

Vue 3 相比 Vue 2 有不少变革，核心区别可以归纳为以下几块：

性能提升
Vue 3 的响应式系统重写，使用 Proxy 代替 Object.defineProperty，提升了性能和兼容性。启动和更新速度更快，内存占用更少。
Composition API
这是 Vue 3 最大的亮点之一。相较于 Vue 2 的 Options API，Composition API 提供了更灵活的逻辑复用方式，类似 React Hooks，方便组织复杂组件逻辑。
更好的 TypeScript 支持
Vue 3 从设计层面支持 TypeScript，类型推断更精准，使用 TS 写 Vue 变得轻松自然。
全局 API 改变
Vue 3 中原来的 Vue.component、Vue.use 等全局注册方式改为通过创建应用实例来操作，更符合现代模块化开发。
内置组件和指令的调整
如 v-model 支持多个绑定，Teleport 用于传送组件到指定 DOM 等新特性。
Tree Shaking 优化
Vue 3 支持按需引入，不使用的代码不会被打包进最终产物，减小体积。

🌐 全局 API 变更

Vue 3 的全局 API 设计做了调整，不再像 Vue 2 那样直接挂载在 Vue 构造函数上，而是通过 createApp 工厂函数返回应用实例。

举个简单例子，Vue 2 注册全局组件是这样：

Vue.component('MyComp', {
    template: '<div>我是全局组件</div>',
});

而 Vue 3 变成了：

import { createApp } from 'vue';
import App from './App.vue';
import MyComp from './MyComp.vue';

const app = createApp(App);
app.component('MyComp', MyComp);
app.mount('#app');

这里你可以看到，createApp 创建了一个应用实例，所有全局 API 都在这个实例上操作。

另外，Vue 3 不再有 Vue.use，取而代之的是手动调用插件的 install 方法，或者通过 app.use() 注册插件。

还有一个重要变化是全局配置的修改，现在通过 app.config 来操作，比如：

app.config.globalProperties.$http = axios;

给所有组件注入 $http。

这种设计让 Vue 3 更加符合现代前端模块化思维，也更利于多应用实例并存。

🚀 创建 Vue 3 项目（Vite 为主，CLI 简要提及）

目前 Vue 3 推荐使用 Vite 作为项目搭建工具，因为 Vite 启动快、热更新体验好，基于原生 ES 模块，极大提升开发效率。

创建 Vue 3 + Vite 项目只需一条命令：

npm create vite@latest my-vue3-app
cd my-vue3-app
npm install
npm run dev

命令解析：

npm create vite@latest：快速使用最新版本 Vite 脚手架。
npm run dev：启动开发服务器，支持热更新。

Vue CLI 创建 Vue 3 项目（简要）

Vue CLI 也支持 Vue 3，不过启动和构建速度不如 Vite。创建命令：

vue create my-vue3-app

选择 Vue 3 版本即可，但推荐用 Vite 作为新项目首选。

📁 目录结构 & 热更新机制

以 Vite 创建的 Vue 3 项目为例，目录结构大致是：

my-vue3-app/
├─ public/               // 静态资源，直接拷贝到打包目录
├─ src/
│  ├─ assets/            // 图片、字体等资源文件
│  ├─ components/        // 组件文件夹
│  ├─ App.vue            // 根组件
│  ├─ main.js            // 入口文件，初始化 Vue 应用
├─ index.html            // 入口 HTML 文件
├─ package.json          // 项目信息和依赖
├─ vite.config.js        // Vite 配置文件