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. 响应式核心

对比 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 种方式）

七、内置组件与高级特性

• <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 使用场景。