Vue3 前端开发核心笔记：Composition API、路由与状态管理

Vue3 前端开发核心知识点

基础语法

• 插值语法：使用 {{ }} 进行文本插值，相当于 innerText。
• 指令绑定：
  • v-bind：单项属性绑定。
  • v-model：双向数据绑定。

组合式 API (Composition API)

• Setup 函数：Vue3 入口逻辑，支持选项式和组合式共存。旧语法可访问 setup 内容，但 setup 无法直接访问旧语法定义的数据。
• Hooks：可复用的函数集合，用于封装逻辑。
• 返回值解构：从 Hook 返回对象中解构所需变量。

  const { sum, add, bigSum } = useSum();
  

• 计算属性 (Computed)：基于响应式数据计算新值，具有缓存功能，仅依赖变化时重新计算。
• 监听器 (Watch)：监听数据变化并执行回调。
• 多根节点：Vue3 支持组件模板中存在多个根标签。

项目结构规范

• 入口文件：main.ts
• 根组件：App.vue
• 目录划分：
  • 一般组件：components 文件夹
  • 路由组件：pages 或 views 文件夹
• 导入使用：遵循标准组件导入与注册流程。

路由配置

• 导航方式：
  1. 字符串写法：直接指定路径。
  2. 对象写法：支持 name 跳转或 path 跳转。

状态管理

• 集中式管理：将共享数据交由统一工具管理，避免 prop drilling。
• 主流方案：Pinia、Redux、Vuex。
• Pinia 落地：在 Pinia 中持久化的数据存储单元称为 Store。

兼容性说明

Vue3 兼容 Vue2 的选项式语法，推荐逐步迁移至组合式风格以提升代码可维护性。