2401_84892260的博客

本文是一篇 Vue3 入门指南，介绍了 Vue3 的核心特点与应用场景，并详细讲解了如何通过 Vite 和 Vue CLI 快速创建第一个 Vue3 项目。通过本文，读者可以快速上手 Vue3，为后续深入学习打下基础。

本文解析 Vue3 的核心语法，涵盖响应式系统、组合式 API 等关键特性，通过代码示例帮助开发者快速上手。文章未完，明日继续补充，欢迎交流代码疑问！

本篇接续上篇，深入讲解 Vue 3 核心语法进阶知识，包括生命周期钩子、组合式 API （hooks）等。你将学习如何构建更复杂、灵活的 Vue 3 应用，并掌握其高级特性和最佳实践。文章内容深入浅出，助你全面提升 Vue 3 开发技能。

今天我们系统学习了 Vue Router 的核心功能，包括基础路由配置、两种传参方式（Query 和 Params）以及嵌套路由的使用。通过路由表定义、动态路径传参和子路由配置，我们掌握了如何实现页面跳转、参数传递和复杂布局。明天将继续深入动态路由和懒加载等高级技巧，进一步提升 Vue 应用的路由管理能力。动手实践是巩固知识的最佳方式，建议尝试实现一个带导航和参数传递的 Demo！

今天我们重点讲解了 Vue Router 的进阶功能。通过 props 配置，可以将路由参数以 props 形式传递给组件，提升代码可读性和可维护性。replace 属性 用于替换历史记录，避免多余的回退操作。编程式导航 提供了动态控制路由的能力，适用于复杂的跳转逻辑。最后，重定向 功能可以轻松实现路径的跳转，适用于路径更新或页面迁移的场景。这些功能帮助我们更灵活地管理路由，构建高效、易维护的单页面应用。

Pinia 是 Vue.js 生态中一个现代化、轻量级的状态管理库，专为 Vue 3 设计。它通过集中式的 Store 管理应用状态，支持模块化开发，使状态管理更加清晰和高效。Pinia 深度集成了 Vue 3 的 Composition API，提供了响应式的状态、计算属性（Getters）和操作方法（Actions），使开发者能够以更直观的方式管理数据。与 Vuex 相比，Pinia 的 API 更简洁，且对 TypeScript 提供了开箱即用的支持。

在 Vue3 中，组件通信是构建应用的核心之一。常用的通信方式包括 `props`（父传子）、`emit`（子传父）、`mitt`（跨组件通信）、`v-model`（双向绑定）、`$attrs`（透传属性）、`$refs`（访问子组件实例）和 `$parent`（访问父组件实例）。每种方式都有其独特的优势和适用场景，例如 `props` 适合单向数据流，`mitt` 适合解耦的跨组件通信，而 `v-model` 则简化了双向绑定。根据实际需求选择合适的通信方式，可以提升代码的可维护性和开发效率。

shallowRef 与 shallowReactive 的浅层响应式控制，readonly 与 shallowReadonly 的只读数据保护，toRaw 与 markRaw 的原始对象访问与非响应式标记，以及 customRef 的自定义响应式逻辑。此外，还将介绍 Teleport 实现组件渲染到任意 DOM 位置的功能，以及 Suspense 处理异步组件加载状态的能力。通过代码示例和场景分析，帮助开发者更好地理解和应用这些核心 API。