Vue3完结- 核心知识总结

Vue3 核心知识总结

---

一、Vue3 概览与起步

• Vue3 优势：更好的性能、更小的打包体积、更友好的 TypeScript 支持、全新的 Composition API。
• 创建工程 ：
  • npm create vue@latest (官方推荐)
  • 或 npm init vite@latest + 安装 @vitejs/plugin-vue
• 编写 App 组件 ：单文件组件 (SFC)，<script setup> 语法糖。

---

二、Composition API（核心）

1. setup 函数

• 在 beforeCreate 之前执行，是组合式 API 的入口。
• 返回值：对象中的属性/方法可在模板使用；或返回渲染函数。
• 语法糖 ：<script setup> --- 更简洁，代码自动暴露给模板。

2. 响应式核心

API	作用	适用场景
ref	包装基本类型 / 对象（底层仍是 reactive）	任意类型，需 .value 访问
reactive	代理对象类型（深层次响应）	仅对象/数组，可直接访问属性
toRef / toRefs	解构 reactive 对象时保持响应式	将单个属性转为 ref / 批量转换
shallowRef / shallowReactive	浅层响应	性能优化，仅监听顶层变化
readonly / shallowReadonly	只读代理	防止意外修改（如 props 传递）

对比 ref vs reactive：

• ref 可包装基本类型，.value 访问；reactive 仅对象。
• ref 对象可以通过 () => obj 传递保持响应；reactive 解构会丢失响应（需 toRefs）。

3. 计算属性与侦听器

• computed：缓存计算结果，支持 getter/setter。
• watch ：显式指定侦听源，支持深度、立即执行、侦听多个源。
  • 四种情况：基本类型、对象（需深度）、数组、响应式对象的属性（用 getter 函数）。
• watchEffect：自动收集依赖，立即执行，不需要指定侦听源。

4. 其他组合式工具

• customRef ：自定义 ref 的依赖追踪和触发更新（如防抖）。
• toRaw / markRaw：获取原始对象 / 标记对象永不转为响应式。

---

三、生命周期

• Vue3 生命周期钩子（选项式 → 组合式对应）：
  • beforeCreate / created → 直接用 setup() 替代
  • beforeMount → onBeforeMount
  • mounted → onMounted
  • beforeUpdate → onBeforeUpdate
  • updated → onUpdated
  • beforeUnmount → onBeforeUnmount
  • unmounted → onUnmounted
• 注意：destroy 相关命名改为 unmount。

---

四、路由（Vue Router 4）

• 创建路由器 ：createRouter + history（createWebHistory / createWebHashHistory）。
• 核心组件 ：<RouterLink>、<RouterView>。
• 路由配置 ：
  • 命名路由、嵌套路由（children）
  • 动态路由参数：params 与 query
  • props 配置：将路由参数映射为组件 props
  • replace 属性：替换历史记录
• 编程式导航 ：useRouter 提供 push、replace、back 等。
• 重定向 ：redirect 配置。

---

五、状态管理（Pinia）

• 优势：轻量、支持 Composition API、TypeScript 友好。
• 搭建 ：npm install pinia → createPinia() → app.use(pinia)。
• 定义 store ：
  • defineStore(id, { state, getters, actions })（选项式）
  • 或组合式写法：defineStore(id, () => { const state = ref(...); const action = ...; return { state, action } })
• 使用 store ：useXxxStore()，可直接解构但会丢失响应 → 用 storeToRefs 保持响应。
• 修改数据 ：
  1. 直接赋值 store.count++
  2. $patch({ count: 2 })
  3. $patch(state => { state.count = 2 })
• getters：类似计算属性。
• $subscribe ：监听 store 变化，替代 watch。

---

六、组件通信（8 种方式）

方式	说明
props	父传子（单向数据流）
自定义事件	子传父 emit('event', data)
mitt	全局事件总线（任意组件）
v-model	双向绑定，支持多个 v-model:title
$attrs	包含未声明的 props / 事件，透传给后代
$refs / $parent	直接访问子组件实例 / 父组件实例
provide / inject	跨层级依赖注入（响应式数据需 ref/reactive）
插槽（slot）	默认插槽、具名插槽、作用域插槽（子传父数据）

---

七、内置组件与高级特性

• <Teleport>：将组件内容传送到 DOM 任意位置（如 modal）。
• <Suspense> ：协调异步组件（setup 返回 Promise），显示 fallback 内容。
• 插槽细节 ：
  • 默认插槽：<slot />
  • 具名插槽：<slot name="header" /> → 父组件用 v-slot:header
  • 作用域插槽：子组件传递数据给父组件插槽 :data="xxx" → 父组件用 v-slot="slotProps"

---

八、TypeScript 基础回顾

• 接口 (interface)：定义对象结构。
• 泛型 ：<T>，函数/组件复用类型。
• 自定义类型 ：type 联合类型、交叉类型等。
• 在 Vue3 中与 defineProps、ref<T>、reactive 配合使用。

---

九、全局 API 与迁移注意点

• 全局 API 转移到应用对象 ：
  • Vue.component → app.component
  • Vue.directive → app.directive
  • Vue.mixin → app.mixin
• 非兼容性改变 ：
  • 移除 $on、$off、$once（事件总线需用 mitt）
  • v-model 默认值改为 modelValue，可绑定多个
  • keyCode 修饰符移除，使用 kebab-case 事件名
  • v-if 与 v-for 优先级变化（v-if 更高）

---

十、自定义 Hooks

• 将组合式逻辑抽离为可复用的函数（命名通常 useXxx）。
• 内部可使用 ref、watch、生命周期等，返回响应式数据和方法。
• 示例：useMousePosition、useLocalStorage。

---

结语

📌 复习重点：响应式原理、watch vs watchEffect、路由参数传递、Pinia 的 $patch、作用域插槽、Teleport 与 Suspense 使用场景。