Vue 3 学习笔记

Vue 3 学习旅程

Vue 3 真的感觉是一个全新的世界！刚开始接触的时候，和 Vue 2 的一些概念既有联系，又有很大的不同。我感觉学习 Vue 3 的过程就像是升级打怪，一步一步解锁新技能。 这份笔记会记录我学习 Vue 3 的主要知识点，以及我在学习过程中遇到的问题和一些小心得。 希望我的笔记能让你在 Vue 3 的学习路上少走弯路！

第一站：Vue 3 基础入门 (打好地基)

• Vue 3 到底新在哪？ （为什么要升级？）

  • Composition API！ Composition API！ Composition API！ 重要的事情说三遍！这是 Vue 3 最核心的改变。 一开始觉得有点懵，Options API 用得好好的，为什么要搞新的？ 但学了一段时间后，真的体会到 Composition API 的强大和灵活。 它可以更好地组织代码，提高代码复用性，而且对 TypeScript 也更友好。
  • 性能提升： 更快更快更快！ Vue 3 底层做了很多优化，比如更高效的虚拟 DOM、更快的渲染速度等等。 虽然在简单的 demo 里可能感觉不明显，但在大型应用中，性能提升会非常可观。
  • 更小的体积： 打包后的代码体积更小了，加载更快了，用户体验更好。
  • 更好的 TypeScript 支持： Vue 3 从底层就用 TypeScript 重写了，对 TypeScript 的支持是原生的！ 对于我这种想学好 TypeScript 的人来说，简直是福音！
  • 其他新特性： Teleport, Fragments, Suspense… 这些新特性在特定的场景下都非常有用，后面会慢慢接触到。

• 环境搭建 (第一步总是最重要！)

  • Node.js 和 npm (或 yarn, pnpm)： 前端开发的基础，必须安装。
  • npm create vue@latest 或 yarn create vue@latest： Vue 官方推荐的脚手架工具！ 基于 Vite，超级快！ 几秒钟就能创建一个 Vue 3 项目，简直飞起。 强烈推荐使用这个方式创建项目！
  • Vue Devtools 浏览器扩展 (Vue 3 版本)： 调试 Vue 应用的神器！ 一定要安装 Vue 3 版本的 Devtools，可以更好地查看组件状态、性能等等。
  • 项目目录结构： src, public, components, assets… 和 Vue 2 的项目结构差不多，但 src 目录下的代码组织方式会因为 Composition API 而有所不同。

• 模板语法 (和 Vue 2 区别不大，上手很快)

  • 插值 {{ }}： 还是和以前一样用，简单方便。
  • 指令 v-xxx： v-if, v-for, v-bind, v-on, v-model 这些常用的指令都还在，用法也基本没变。
    • v-bind 简写 :，v-on 简写 @： 继续好用！代码更简洁了。
    • v-for 的 :key 属性： 非常重要！ Vue 3 仍然强烈建议在 v-for 中使用 :key，尤其是在需要进行列表更新、排序等操作时，:key 能帮助 Vue 更高效地更新 DOM。 一定要记住给 :key 绑定一个唯一且稳定的值！ 比如数据的 id。
    • v-if 和 v-show 的区别： v-if 是条件渲染，不满足条件时 DOM 元素不会渲染； v-show 只是控制 CSS 的 display 属性，DOM 元素始终存在。 根据场景选择合适的指令。
  • 表达式： 在模板中仍然可以使用 JavaScript 表达式，但要保持简洁，复杂的逻辑应该放在 JavaScript 代码中处理。

• 响应式系统 (Vue 的灵魂！要理解透彻)

  • ref() 和 reactive()： Vue 3 响应式系统的核心！ 用来创建响应式数据。
    • ref()： 用来包装基本类型数据 (number, string, boolean…)。 访问和修改值需要通过 .value。 一开始可能会觉得有点麻烦，但习惯了就好。 ref 返回的是一个 RefImpl 对象。
    • reactive()： 用来包装对象类型数据 (object, array…)。 直接访问和修改属性。 reactive 返回的是一个 Proxy 对象。
    • 选择 ref 还是 reactive？ 一般来说，如果你要让一个变量成为响应式，并且这个变量是基本类型，就用 ref；如果是对象或者数组，就用 reactive。 当然，你也可以用 reactive 包裹基本类型，但这通常不是最佳实践。
  • computed()：计算属性 和 Vue 2 的计算属性用法类似，但 Composition API 中需要在 setup() 函数中使用 computed() 来创建计算属性。 记住计算属性有缓存！ 只有依赖项发生变化时才会重新计算。
  • watch() 和 watchEffect()：侦听器 用来监听数据的变化，并在数据变化时执行一些操作。
    • watch()： 需要明确指定要侦听的数据源 (可以是 ref, reactive 返回的值，也可以是计算属性，甚至是一个 getter 函数)。 可以更精细地控制侦听的行为，例如深度侦听、立即执行、设置 flush 时机等。
    • watchEffect()： 自动收集依赖！ 它会自动侦听回调函数中用到的所有响应式数据，当这些数据发生变化时，回调函数就会重新执行。 代码更简洁，但有时候依赖关系可能不太清晰，需要注意。
    • watch 和 watchEffect 的选择？ 如果你需要明确指定侦听的数据源，或者需要更精细地控制侦听行为，就用 watch； 如果你只是想在某些响应式数据变化时执行一些副作用操作，可以用 watchEffect。
  • 响应式数据的读取和修改： .value (refs)，直接访问 (reactives)。 初学者容易忘记 .value，要特别注意！

• 组件基础 (组件化开发是 Vue 的核心)

  • 组件的概念： 把页面拆分成独立、可复用的模块，提高代码复用性和可维护性。
  • 组件的创建和注册：
    • 单文件组件 (SFC - .vue 文件)： 强烈推荐使用单文件组件！ 模板、脚本、样式都放在一个文件里，结构清晰，方便管理。
    • 全局注册： 通过 app.component('组件名', 组件) 全局注册组件，可以在任何组件中使用。 但全局注册可能会导致命名冲突，而且不利于按需加载，所以不推荐过度使用全局注册。
    • 局部注册： 在组件的 components 选项中注册组件，只能在当前组件及其子组件中使用。 推荐使用局部注册，更清晰，更可控。 <script setup> 中注册组件更简洁，直接导入即可。
  • 组件的 props：父组件向子组件传递数据
    • 静态 props 和动态 props： 和 Vue 2 用法一样。 动态 props 要用 v-bind 或简写 : 绑定。
    • props 验证和类型声明： 非常重要！ 可以帮助你更早地发现错误，提高组件的健壮性。 Vue 3 推荐使用类型声明，例如： defineProps<{ message: string }>() 或 defineProps({ message: String })。
  • 组件的 emits：子组件向父组件传递事件
    • $emit('事件名', 数据)： 子组件通过 $emit 触发自定义事件，父组件通过 v-on 或 @ 监听事件。
    • defineEmits(['事件名'])： 在 <script setup> 中显式声明组件会触发哪些事件，可以提供类型检查和更好的文档。
  • 组件的 slots：内容分发
    • 默认插槽： 子组件中使用 <slot> 占位，父组件在子组件标签中插入内容，内容会渲染到子组件的默认插槽位置。
    • 具名插槽： 子组件中使用 <slot name="插槽名"> 定义具名插槽，父组件使用 <template v-slot:插槽名> 或简写 <template #插槽名> 插入内容。 具名插槽让组件的结构更灵活，可以更精确地控制内容分发的位置。
    • 作用域插槽： 子组件向插槽传递数据，父组件可以在插槽内容中访问这些数据。 作用域插槽让组件更加强大，可以实现更灵活的定制化。
  • 组件的生命周期钩子： 和 Vue 2 的生命周期钩子类似，但 Composition API 中需要在 setup() 函数中使用 onMounted, onUpdated, onUnmounted 等函数来注册生命周期钩子。 生命周期钩子是理解组件运行机制的关键！ 要搞清楚每个钩子函数的执行时机和用途。
  • 父子组件通信： props (父 -> 子), emits (子 -> 父), provide/inject (祖先组件 -> 后代组件，后面会学到)。 组件通信是构建复杂应用的基础！

第二站：Composition API 核心 (进阶之路)

• Composition API 基础 (从 Options API 到 Composition API)

  • Composition API 的动机： 解决 Options API 在大型组件中代码难以组织和复用的问题。 Options API 把相关的代码分散在 data, methods, computed, watch 等不同的选项中，当组件逻辑复杂时，代码会变得难以阅读和维护。 Composition API 可以让我们把相关的代码组织在一起，提高代码的可读性和可维护性。
  • setup() 函数：Composition API 的入口！ 组件的所有逻辑都应该写在 setup() 函数中。 setup() 函数在组件创建之前执行，它接收两个参数： props 和 context。 setup() 函数需要返回一个对象，对象中的属性和方法可以在模板中直接使用。
  • 响应式 API 在 Composition API 中的应用： ref, reactive, computed, watch, watchEffect 这些响应式 API 都是在 setup() 函数中使用的。
  • 生命周期钩子函数在 Composition API 中的使用： onMounted, onUpdated, onUnmounted 等生命周期钩子函数需要在 setup() 函数中导入和调用。
  • 模板引用 (Template Refs) 在 Composition API 中的使用： ref() 结合模板中的 ref attribute，访问 DOM 元素或子组件实例。 在 setup() 函数中声明一个 ref，然后在模板中给元素或组件绑定 ref attribute，就可以通过 .value 访问到对应的 DOM 元素或组件实例。

• 逻辑复用 (Composables：代码复用的新姿势)

  • Mixins (Vue 2 的逻辑复用方式，了解即可)： Mixins 会导致命名冲突、隐式依赖等问题，不利于代码维护。 Vue 3 推荐使用 Composables 来进行逻辑复用。
  • Composables (Composition Functions)： 基于 Composition API 的逻辑复用方案！ 把组件中可复用的逻辑抽离成独立的函数 (Composables)，然后在多个组件中引入和使用这些 Composables。 Composables 通常会返回一些响应式状态和操作这些状态的函数。
  • Composables 的优势： 更清晰的依赖关系，避免命名冲突，更好的代码组织和维护性。 Composables 让代码复用更加灵活和强大。
  • 创建自定义 Composables： 例如封装数据请求逻辑、表单验证逻辑、用户权限判断逻辑等等。 Composables 是提高代码复用性和开发效率的利器！ 多尝试封装一些常用的逻辑成 Composables。

• 高级 Composition API 特性 (锦上添花)

  • provide() 和 inject()：依赖注入 跨层级组件通信的利器！ 祖先组件可以使用 provide() 提供数据，后代组件可以使用 inject() 注入数据，不需要一层一层地传递 props。 provide() 和 inject() 通常和 Symbol 一起使用，可以更好地组织和管理依赖注入。
  • Teleport：瞬移组件 把组件渲染到 DOM 树的其他位置！ 例如把弹窗组件渲染到 body 下，解决弹窗被父组件样式或 overflow: hidden 影响的问题。 Teleport 非常适合处理弹窗、模态框、提示框等组件。
  • Suspense：处理异步组件 优雅地处理异步组件加载和错误！ 在异步组件加载完成之前显示 loading 状态，加载失败时显示错误信息。 Suspense 可以提升用户体验，让异步组件的加载过程更加平滑。
  • Fragments：多根节点组件 组件可以有多个根节点了！ 不再需要像 Vue 2 那样必须用一个 div 包裹组件的内容。 Fragments 让组件的结构更简洁，减少了不必要的 DOM 嵌套。
  • Emits 定义 (defineEmits)： 在 <script setup> 中使用 defineEmits 显式声明组件会触发的事件，提供类型检查和更好的文档。 让组件的接口更加清晰！
  • <script setup> 语法糖： 超好用！强烈推荐使用！ 更简洁的组件编写方式。 自动注册组件、props 和 emits，顶层变量自动暴露到模板，代码更简洁，开发效率更高。

第三站：Vue 3 进阶与生态系统 (扩展技能)

• Vue Router (路由)：SPA 应用的基石

  • Vue Router 的安装和配置： npm install vue-router@4 安装 Vue Router 4 (Vue 3 版本)。 配置路由实例，在 Vue 应用中注册路由。
  • 路由模式 (Hash 模式 vs. History 模式)： 了解两种路由模式的区别和应用场景。 History 模式更美观，但需要服务器端配置支持。
  • 动态路由参数： 通过路由参数传递动态数据。 例如 /user/:id，可以通过 $route.params.id 访问到路由参数 id。
  • 嵌套路由： 构建多层级的路由结构。 例如 /user/:id/profile。
  • 命名路由： 给路由命名，方便在代码中引用路由。 例如 router.push({ name: 'userProfile', params: { id: 123 } })。
  • 编程式导航： 使用 router.push, router.replace, router.go 等方法进行页面跳转。
  • 路由守卫： 控制路由的访问权限。 例如全局路由守卫、路由独享守卫、组件内守卫。 用于实现登录验证、权限控制等功能。
  • 路由元信息 (meta fields)： 给路由配置额外的元信息，例如页面标题、权限信息等。
  • <router-link> 和 <router-view> 组件： <router-link> 用于创建导航链接，<router-view> 用于渲染路由组件。 <RouterView> 和 <RouterLink> 是 Vue 3 版本的新组件，用法和以前的组件类似。

• Pinia (状态管理)：Vue 3 官方推荐的状态管理方案

  • Pinia 的优势： 更符合 Vue 3 Composition API 的状态管理方案，更简洁，更直观，更好的 TypeScript 支持。 相比 Vuex，Pinia 学习曲线更平缓，更容易上手。
  • Store 的定义 (defineStore)： 使用 defineStore 定义 Store。 每个 Store 都是独立的，可以理解为一个模块。
  • State (状态)： Store 中的数据，类似于组件的 data。
  • Getters (计算属性)： Store 中的计算属性，基于 State 计算出新的值。
  • Actions (方法)： Store 中的方法，用于修改 State。 Actions 可以是同步的，也可以是异步的。 推荐在 Actions 中处理业务逻辑，保持组件的简洁。
  • 在组件中使用 Store (useStore)： 使用 useStore hook 在组件中获取 Store 实例，并访问 State, Getters, Actions。
  • Pinia 与 TypeScript 的集成： Pinia 对 TypeScript 的支持非常好，可以提供完整的类型推断和类型检查。

• Vue Test Utils (单元测试)：保证代码质量

  • 单元测试的概念： 对代码的最小单元 (例如组件、函数) 进行测试，保证代码的正确性。
  • Vue Test Utils： Vue 官方提供的单元测试工具库。 可以方便地对 Vue 组件进行测试。
  • 编写单元测试用例： 测试组件的 props, emits, slots, methods, computed, watch 等。
  • 组件挂载、查找元素、触发事件、设置 props 和 data、断言等常用操作。
  • 单元测试可以帮助你发现代码中的 bug，提高代码质量，增强代码的可维护性。 虽然写单元测试比较花时间，但长期来看是非常值得的。

• TypeScript 支持 (进阶必备)

  • 在 Vue 3 项目中使用 TypeScript： Vue 3 对 TypeScript 的支持非常好，强烈推荐在 Vue 3 项目中使用 TypeScript。
  • 组件选项式 API 和 Composition API 的 TypeScript 支持： Vue 3 提供了很好的 TypeScript 支持，无论是使用 Options API 还是 Composition API，都可以很好地结合 TypeScript。
  • Props, Emits, Computed, Ref, Reactive 的类型声明： Vue 3 提供了类型声明的方式，可以帮助你在开发过程中更早地发现类型错误。 例如使用 defineProps<{ message: string }>() 声明 props 的类型，使用 ref<string | null>(null) 声明 ref 的类型。
  • <script setup> 中的类型推断： <script setup> 语法糖可以提供更好的类型推断，让 TypeScript 在 Vue 组件中更加方便好用。

第四站：学习心得和未来展望 (持续学习)

• Vue 3 学习心得：

  • Composition API 是核心！ 一定要花时间好好学习和理解 Composition API，它是 Vue 3 的精髓。 一开始可能会觉得有点难，但一旦理解了它的思想，你会发现它真的很强大。
  • 拥抱 TypeScript！ TypeScript 可以提高代码的可维护性和健壮性，在 Vue 3 项目中使用 TypeScript 是一个非常好的选择。
  • 多看官方文档！ Vue 3 的官方文档非常详细和友好，遇到问题首先查阅官方文档。
  • 多写代码！ 学习编程最重要的就是实践！ 多写 demo，多做项目，才能真正掌握 Vue 3。
  • 加入社区！ 参与 Vue 社区的讨论，可以学习到很多新的知识和最佳实践，也可以结交很多志同道合的朋友。

• 未来展望：

  • Vue 3 生态系统正在不断完善，越来越多的库和工具都开始支持 Vue 3。
  • Vue 3 的性能和新特性将会在未来的项目中发挥越来越重要的作用。
  • 学习 Vue 3 是前端开发者提升技能的重要一步，也是面向未来的选择。

学习资源推荐 (我经常看的)：

• Vue 3 官方文档： https://vuejs.org/ 最权威的学习资料，没有之一！
• Vue Mastery： https://www.vuemastery.com/ 有很多高质量的 Vue 视频教程，讲解深入浅出。
• Vue School： https://vueschool.io/ 另一个很棒的 Vue 视频教程平台，也有很多免费的课程。
• Awesome Vue： https://github.com/vuejs/awesome-vue Vue 社区资源集合，可以找到各种 Vue 相关的库、工具、文章、教程等等。

最后，希望我的这份学习笔记能对你有所帮助！ Vue 3 的学习之路还很长，让我们一起加油！ 💪