Vue 3 核心开发笔记：组合式 API、路由与状态管理

Vue 3 核心开发笔记

1. 基础语法与绑定

• 插值语法：使用 {{ }} 进行文本插值，功能相当于 DOM 的 innerText。
• 属性绑定：v-bind 用于单向绑定属性值，简写为 :。
• 双向绑定：v-model 用于表单输入的双向数据绑定。

2. 组合式 API (Composition API)

• Hooks：可复用的函数集合。
• Setup 函数：配合组合式 API 使用，返回对象并通过解构获取方法。

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

• 共存性：Vue 3 中选项式和组合式共存。旧语法可访问 setup 上下文，但 setup 不能直接访问旧语法的实例属性。

3. 项目结构与路由

• 文件组织：一般组件放入 components 文件夹；路由组件通常放在 pages 或 views 文件夹。
• 路由跳转：
  1. 字符串写法：to="/path"
  2. 对象写法：{ name: 'Home' } 或 { path: '/home' }
• 入口文件：main.ts
• 根组件：App.vue

4. 状态管理

• 集中式管理：将共享数据交给集中式管理工具。
• 常用方案：Pinia（推荐）、Redux、Vuex。
• Store：Pinia 落地后的状态存储单元称为 store。

5. 响应式与计算

• Computed：计算属性，基于已有响应式数据计算新值，具有缓存功能，仅依赖变化时重新计算。
• Watch：监听器，用于观察数据变化并执行副作用。
• Function：普通函数不缓存。

6. Vue 3 新特性

• 多根节点：Vue 3 模板支持编写多个根标签。