学习 Vue3 的正确姿势

Q: 刚开始学习 Vue3，应该如何规划学习路线？开发环境又该怎么搭建？

A: Vue3 的学习应该遵循 渐进式 的策略：先快速入门掌握基本开发能力，再深入原理理解底层机制，最后补充细枝末节的知识。开发环境方面，官方推荐使用 Vite 作为构建工具，配合 Vue-Official 插件获得最佳开发体验。

Vue3 知识体系总览

Vue3 的整体知识可以分为四个层次，建议按照这个顺序循序渐进地学习：

第一层：导言

在开始学习之前，首先要明确自己的定位：

  • 零基础同学：一定要先学习 Vue2，因为 Vue3 保留了 Vue2 绝大部分的概念和 API，有 Vue2 基础学 Vue3 会事半功倍。
  • 有其他框架开发经验（React、Angular 等）：可以从「快速入门」开始看，这一部分偏重于 Vue3 的使用层面知识。
  • 有 Vue3 开发经验：直接从「深入本质」开始看，着重理解 Vue3 的底层原理。

第二层：快速入门

这是最重要的一层，目标是理解 Vue3 的关键概念，能够上手干活。涵盖以下内容：

  • Vue3 基础语法（模板语法、响应式基础、计算属性、侦听器）
  • 组件（组件定义、Props、自定义事件、v-model、插槽）
  • 前端路由（Vue Router）
  • 状态管理（Pinia）
  • 组件库的使用

有了 Vue3 开发经验的同学可以直接略过这一层。

第三层：深入本质

这一层的目标是让你深入理解 Vue3 的底层原理，从容应对复杂项目中的技术挑战。主要包括：

  • 虚拟 DOM 的本质：理解虚拟 DOM 是什么，为什么要用虚拟 DOM
  • 模板的本质：模板是如何被编译成渲染函数的
  • 响应式的本质：数据拦截、依赖收集、触发更新的完整链路
  • 计算属性的本质：缓存机制是如何实现的
  • v-model 的本质：语法糖背后做了什么
  • 插槽的本质：作用域插槽的工作原理
  • diff 算法：Vue3 如何高效地比较新旧虚拟 DOM

这一层重在介绍思想，不涉及具体的源码实现，但需要你有一定的架构认知，包括 monorepo、工程化方案、类型库选型、设计模式、前端工具链等。

第四层：细节补充

这一层的知识特点是「轻知识、比较杂、比较碎」，包括：

  • 一些之前没有介绍的特性（透传 Attributes、依赖注入、异步组件、Suspense 等）
  • 常见的需求场景（自定义指令、组合式函数、长列表优化、懒加载等）
  • 第三方库的使用（VueUse、vuedraggable、vue-chartjs 等）
  • Vite 构建工具（配置、预构建、生产版本、环境变量、插件等）

这一层是一个长期更新的章节，你可以灵活安排学习时间。

Vue3 开发环境搭建

包管理器的选择

搭建工程首先需要一个包管理器，目前主流的有以下四种：

包管理器 特点
npm Node.js 自带，生态最完善
pnpm 磁盘空间利用率高，安装速度快
yarn Facebook 出品，曾经是 npm 的有力竞争者
bun 新兴工具，运行时 + 包管理器一体化

对于 Vue3 项目，推荐使用 pnpm，官方脚手架 create-vue 也默认使用 pnpm。

创建项目

使用官方推荐的脚手架工具快速创建项目：

pnpm create vue@latest

按照提示选择需要的功能（TypeScript、JSX、Vue Router、Pinia、Vitest 等），脚手架会自动生成完整的项目结构。

项目结构详解

创建完成后，你会看到如下目录结构：

  • .vscode：VS Code 的配置文件，包括代码格式化、主题样式等。
  • node_modules：项目所需的所有依赖包，由包管理器自动管理。
  • public：静态资源文件夹，不会经过构建工具处理。例如 favicon 图标文件。
  • src：源码文件夹，我们的开发工作主要在这里进行。
    • assets：静态资源目录，打包时会被构建工具处理（如压缩、hash 命名）。
    • components：组件目录，存放各种功能组件。
    • App.vue：根组件。
    • main.js：入口 JS 文件。
  • index.html：项目的入口 HTML 文件，Vite 将利用它来处理应用的加载。
  • vite.config.js：Vite 的配置文件，用于定制构建和开发服务。
  • package.json：定义了项目所需的各种模块以及项目的配置信息。

VS Code 插件配置

在 Vue2 时代，大家接触更多的是 Vetur，该插件主要是对 Vue 单文件组件提供高亮、语法支持和检测功能。

随着 Vue3 版本的发布，官方团队推荐使用 Volar 插件，它覆盖了 Vetur 所有的功能，并且支持 Vue3 和 TypeScript 的语法检测。

而现在，无论是 Vetur、Volar、TypeScript Vue Plugin 都已成为历史。目前官方推出了 Vue-Official，这个最新的插件将前面所有插件的功能都涵盖了。只需要安装这一个插件即可：

  • Vue-Official：语法高亮、智能提示、类型检查、模板诊断等
  • Vue VSCode Snippets（可选）：快速生成 Vue 代码模板，提高开发效率

Vite：官方推荐的构建工具

Vite 是 Vue 官方推荐的构建工具，它之所以能够显著提升开发体验，是因为它的工作原理和 Webpack 完全不同。

Vite 在开发阶段压根儿就不打包，而是通过请求本地服务器的方式来获取文件。它利用浏览器原生支持的 ES Module，按需编译，实现极速的冷启动和热更新。

常用的 Vite 配置项：

  1. base：设置项目的基础路径，对部署到非根目录的项目特别有用。
  2. server：配置开发服务器选项，如端口（port）、自动打开浏览器（open）、跨域代理（proxy）等。
  3. build：构建过程的配置，如输出目录（outDir）、sourcemap、压缩（minify）、分块策略（rollupOptions）等。
  4. css：CSS 相关选项，如预处理器配置、模块化支持。
  5. esbuild：自定义 ESBuild 配置，如指定 JSX 的工厂函数和片段。
  6. optimizeDeps：预构建依赖管理，可以指定需要预构建的依赖以加速冷启动。
  7. define：定义在源码中全局可用的常量替换。
  8. publicDir：设置公共静态资源目录，默认为 public。

总结

学习 Vue3 的最佳路径是：导言（明确自身定位）→ 快速入门（掌握基本开发）→ 深入本质（理解核心原理）→ 细节补充（查漏补缺）。开发环境搭建建议使用 pnpm create vue@latest 快速生成项目，安装 Vue-Official 插件获得最佳编码体验，Vite 作为构建工具能显著提升开发效率。打好地基，后面的学习才能事半功倍。