|
| 1 | +# vue3 主要 API |
| 2 | + |
| 3 | +## 内核响应式 API 与组件声明 --- 频繁使用 |
| 4 | + |
| 5 | +| 成员名称 | 描述 | 用途/替代的 Options API | |
| 6 | +| :---------------- | :----------------------------------------------------------------------- | :---------------------- | |
| 7 | +| `ref` | 创建响应式基本类型值（或对象）。访问/修改值需使用 `.value`。 | 创建响应式状态 | |
| 8 | +| `reactive` | 创建响应式对象（深层响应式代理）。 | 创建响应式状态 | |
| 9 | +| `computed` | 创建计算属性。基于其他响应式状态的值进行缓存计算。 | `computed` 选项 | |
| 10 | +| `watch` | 监听一个或多个响应式数据源的变化，并执行副作用。 | `watch` 选项 | |
| 11 | +| `watchEffect` | 立即运行一个副作用函数，同时响应式地跟踪其依赖，并在依赖变化时重新运行。 | 类似简化版的 `watch` | |
| 12 | +| `defineComponent` | 定义 Vue 组件（支持 SFC 或更好的 TS 类型推断）。 | 定义组件的推荐方式 | |
| 13 | +| `defineProps` | 声明组件接收的 props（仅在 `<script setup>` 中使用）。 | `props` 选项 | |
| 14 | +| `withDefaults` | 在 TypeScript 中为 `defineProps` 宏提供默认值的类型声明。 | | |
| 15 | +| `defineEmits` | 声明组件可触发的事件（仅在 `<script setup>` 中使用）。 | `emits` 选项 | |
| 16 | +| `defineExpose` | 暴露组件实例属性/方法给父组件（仅在 `<script setup>` 中使用）。 | 替代默认的实例暴露 | |
| 17 | +| `provide` | 跨层级向下传递数据/方法。 | `provide` 选项 | |
| 18 | +| `inject` | 在后代组件中接收上层组件 `provide` 的数据/方法。 | `inject` 选项 | |
| 19 | +| `onMounted` | 生命周期钩子：组件挂载后执行。 | `mounted` | |
| 20 | +| `onUpdated` | 生命周期钩子：响应式数据变化导致组件更新后执行。 | `updated` | |
| 21 | +| `beforeUnmount` | 生命周期钩子：组件卸载前执行。 | | |
| 22 | +| `nextTick` | 等待下一次 DOM 更新周期后执行回调函数。 | `Vue.nextTick` | |
| 23 | + |
| 24 | +## 工具函数 与 渲染函数 --- 偶尔使用 |
| 25 | + |
| 26 | +| API | 描述 | 常见用途 | |
| 27 | +| :---------------------- | :----------------------------------------------------------------------- | :------------------------- | |
| 28 | +| `toRefs` | 将 `reactive` 对象解构成一组 `ref`，解构后仍保持响应性。 | 从组合式函数返回响应式状态 | |
| 29 | +| `toRef` | 为 `reactive` 对象的某个属性创建一个单独的 `ref`，与源属性保持同步。 | 传递单个响应式属性 | |
| 30 | +| `unref` | 获取一个值，如果是 `ref` 则返回其 `.value`，否则返回本身。 | 统一处理 `ref` 和普通值 | |
| 31 | +| `isRef` | 检查一个值是否是 `ref` 对象。 | 类型检查/区分响应式类型 | |
| 32 | +| `isReactive` | 检查一个对象是否是由 `reactive()` 创建的响应式代理。 | 类型检查 | |
| 33 | +| `isProxy` | 检查一个对象是否是由 `reactive()` 或 `readonly()` 创建的代理。 | 类型检查 | |
| 34 | +| `markRaw` | 标记一个对象，使其永远不会被转换为响应式代理（例如，用于第三方库实例）。 | 性能优化/避免不必要的代理 | |
| 35 | +| `shallowRef` | 创建浅层 `ref`，只有通过 `.value`重置会触发更新。 | 性能优化 | |
| 36 | +| `shallowReactive` | 创建浅层响应式对象，只跟踪顶层属性的响应性。 | 性能优化 | |
| 37 | +| `h` / `createVNode` | 渲染函数：创建虚拟节点（VNode）。 | 手动编写渲染函数或 JSX | |
| 38 | +| `useSlots` / `useAttrs` | 在组合式 API 中访问组件的 `$slots` 和 `$attrs`。 | | |
| 39 | +| `customRef` | 创建自定义响应式引用，完全控制依赖追踪和更新触发。 | | |
| 40 | +| `defineAsyncComponent` | 定义异步组件，常与 `<Suspense>` 配合使用。 | | |
| 41 | +| `<Suspense>` | 协调异步组件的加载状态，控制加载中/加载失败的展示（实验性）。 | | |
| 42 | +| `mounted` | 在指令绑定元素被插入到父级 DOM 之后调用。 | | |
| 43 | +| `beforeUnmount` | 在指令绑定元素从 DOM 中移除之前调用。 | | |
| 44 | + |
| 45 | +## 内置组件 与 进阶/低频成员 -- 几乎不用 |
| 46 | + |
| 47 | +| 类别 | 成员名称 | 描述 | |
| 48 | +| :-------- | :------------------- | :--------------------------------------------------- | --- | |
| 49 | +| 内置组件 | `<KeepAlive>` | 缓存动态组件的非活动实例，保持组件状态。 | |
| 50 | +| 内置组件 | `<Teleport>` | 将组件内容渲染到 DOM 结构中指定的位置。 | |
| 51 | +| 内置组件 | `<Transition>` | 为单个元素或组件提供进入/离开过渡动画。 | |
| 52 | +| 内置组件 | `<TransitionGroup>` | 为列表元素的进入/离开/移动提供过渡动画。 | |
| 53 | +| 进阶/低频 | `getCurrentInstance` | 获取当前组件实例（主要用于库开发，应用代码应慎用）。 | |
| 54 | +| 进阶/低频 | `watchSyncEffect` | `watchEffect` 的变体，副作用在 DOM 更新前同步执行。 | | |
| 55 | +| 进阶/低频 | `watchPostEffect` | `watchEffect` 的变体，副作用在 DOM 更新后执行。 | |
0 commit comments