[特殊字符] Vue3 API 汇总表格

DeppBing

1734人浏览 · 2025-09-06 09:15:00

DeppBing · 2025-09-06 09:15:00 发布

1️⃣ 响应式 API

API	作用	使用场景	常用程度
`ref()`	创建基本类型/引用类型响应式	基础数据响应式	⭐⭐⭐⭐⭐
`reactive()`	创建对象/数组响应式	管理复杂对象	⭐⭐⭐⭐⭐
`readonly()`	创建只读响应式对象	防止误修改	⭐⭐⭐
`shallowRef()`	顶层响应式，不递归	性能优化	⭐⭐
`shallowReactive()`	顶层响应式对象	性能优化	⭐⭐
`toRef()`	将对象属性转为 `ref`	解构 reactive 对象	⭐⭐⭐
`toRefs()`	将整个对象转为 `ref` 集合	解构 reactive 保持响应式	⭐⭐⭐
`isRef()`	判断是否是 ref	类型判断	⭐⭐
`isReactive()`	判断是否是 reactive	调试、逻辑判断	⭐⭐
`isReadonly()`	判断是否是只读对象	调试	⭐
`isProxy()`	判断是否是 proxy 对象	调试	⭐
`customRef()`	自定义 ref	实现防抖/节流	⭐⭐
`markRaw()`	标记对象为非响应式	避免代理大对象	⭐⭐
`shallowReadonly()`	顶层只读对象	限制只读，性能优化	⭐

2️⃣ 计算与侦听

API	作用	使用场景	常用程度
`computed()`	声明计算属性	依赖数据生成新值	⭐⭐⭐⭐⭐
`watch()`	监听指定响应式数据	API 请求、副作用	⭐⭐⭐⭐⭐
`watchEffect()`	自动追踪依赖执行副作用	快速调试、自动依赖收集	⭐⭐⭐

3️⃣ 生命周期钩子

API	作用	使用场景	常用程度
`onMounted()`	组件挂载完成	DOM 操作、发请求	⭐⭐⭐⭐⭐
`onUnmounted()`	组件卸载	清理定时器、解绑事件	⭐⭐⭐⭐⭐
`onBeforeMount()`	挂载前	初始化逻辑	⭐⭐⭐
`onBeforeUnmount()`	卸载前	清理资源	⭐⭐
`onUpdated()`	DOM 更新后	UI 更新逻辑	⭐⭐⭐
`onBeforeUpdate()`	DOM 更新前	旧 DOM 状态处理	⭐⭐
`onActivated()`	keep-alive 激活	恢复缓存组件状态	⭐⭐
`onDeactivated()`	keep-alive 停用	保存组件状态	⭐⭐
`onErrorCaptured()`	捕获子组件错误	错误边界处理	⭐⭐
`onRenderTracked()`	渲染依赖被追踪	调试依赖	⭐
`onRenderTriggered()`	渲染被触发	调试依赖更新	⭐
`onServerPrefetch()`	SSR 数据预取	仅 SSR	⭐

4️⃣ 组件通信 / `<script setup>` 专属

API	作用	使用场景	常用程度
`defineProps()`	接收父组件 props	子组件接收数据	⭐⭐⭐⭐⭐
`defineEmits()`	声明 & 触发事件	子组件传递事件	⭐⭐⭐⭐⭐
`defineExpose()`	暴露子组件方法	父组件调用子组件方法	⭐⭐⭐
`defineSlots()`	声明插槽	TS 类型提示	⭐⭐
`withDefaults()`	为 props 设置默认值	配合 `defineProps`	⭐⭐

5️⃣ 依赖注入

API	作用	使用场景	常用程度
`provide()`	提供数据给子孙组件	跨层级通信	⭐⭐⭐
`inject()`	注入数据	获取 provide 值	⭐⭐⭐

6️⃣ DOM & 模板

API	作用	使用场景	常用程度
`ref()` (template)	获取 DOM/组件实例	操作 DOM	⭐⭐⭐⭐
`nextTick()`	DOM 更新后执行	获取最新 DOM 状态	⭐⭐⭐⭐⭐
`useAttrs()`	获取透传的 attrs	高阶组件	⭐⭐
`useSlots()`	获取插槽内容	动态插槽	⭐⭐
`useCssVars()`	动态绑定 CSS 变量	样式动态化	⭐⭐
`useCssModule()`	使用 CSS Modules	样式隔离	⭐

7️⃣ 渲染函数 & 指令

API	作用	使用场景	常用程度
`h()`	手动创建 VNode	渲染函数、JSX	⭐⭐⭐
`resolveComponent()`	动态解析组件	动态组件渲染	⭐⭐
`resolveDirective()`	动态解析指令	渲染函数	⭐
`withDirectives()`	在渲染函数中应用指令	高级场景	⭐
`mergeProps()`	合并 props	JSX/渲染函数	⭐
`cloneVNode()`	克隆并修改 VNode	自定义渲染	⭐
`isVNode()`	判断是否 VNode	调试	⭐

8️⃣ 应用级 API (`createApp`)

API	作用	使用场景	常用程度
`createApp()`	创建应用实例	项目入口	⭐⭐⭐⭐⭐
`app.mount()`	挂载应用	启动 Vue	⭐⭐⭐⭐⭐
`app.use()`	安装插件	Vue Router / Pinia	⭐⭐⭐⭐⭐
`app.component()`	全局注册组件	公共组件	⭐⭐⭐⭐
`app.directive()`	全局注册指令	自定义指令	⭐⭐
`app.mixin()`	全局混入	插件开发	⭐
`app.provide()`	全局依赖注入	跨组件通信	⭐⭐
`app.config.globalProperties`	全局变量	全局工具方法	⭐⭐⭐

9️⃣ 其它工具 & 全局

API	作用	使用场景	常用程度
`getCurrentInstance()`	获取组件实例	访问 proxy / appContext	⭐⭐⭐
`defineComponent()`	显式定义组件	TS 类型推导	⭐⭐⭐
`defineAsyncComponent()`	异步组件	按需加载	⭐⭐⭐
`defineCustomElement()`	定义 Web Components	跨框架组件	⭐
`version`	Vue 版本号	调试	⭐

✅ 总结

Vue3 API 可以分 9 大类：

响应式（ref, reactive, toRef...）
计算 & 侦听（computed, watch...）
生命周期（onMounted, onErrorCaptured...）
组件通信（defineProps, defineEmits...）
依赖注入（provide, inject）
DOM & 模板（ref, nextTick, useAttrs...）
渲染函数 & 指令（h, resolveComponent...）
应用 API（createApp, app.use...）
其它工具（getCurrentInstance, defineAsyncComponent...）

其中：

必须掌握（核心常用）：ref, reactive, computed, watch, onMounted, defineProps, defineEmits, nextTick, createApp
进阶掌握：provide/inject, customRef, shallowRef, defineExpose, getCurrentInstance, h
高级/特殊场景：onServerPrefetch, useCssVars, cloneVNode, defineCustomElement

亚马逊云科技技术品牌专区

更多推荐

open-code-review Codex 插件教程：对话式调用评审技能指南

本文是一份面向新手的 **open-code-review Codex 插件教程**，教你在 Codex 中通过对话式方式调用 open-code-review 的 AI 代码评审技能。open-code-review 是阿里巴巴开源的 AI 代码评审工具，采用"确定性流水线 + LLM Agent"混合架构，内置多语言评审规则（NPE、线程安全、XSS、SQL 注入等），可在 Codex 里用一

亚马逊云科技技术品牌专区

OBS Studio 完整指南：免费开源录屏与直播软件从零上手

想做一场像模像样的直播，或者把屏幕内容录成教程视频，但一想到商用软件的订阅费就有些犹豫？其实你不需要花一分钱。OBS Studio 是一款免费开源的直播与录屏软件，支持 Windows、macOS 和 Linux，采集、混音、编码、推流、录制，一条流水线全包了。## 先搞清楚 OBS Studio 是什么OBS Studio 是一个"场景化"的采集合成工具：你把摄像头、窗口、浏览器、图片、

亚马逊云科技技术品牌专区

如何用MediaCrawler爬取小红书抖音数据？7大平台爬虫从安装到实战完整指南

MediaCrawler 是一个支持小红书、抖音、快手、B站、微博、百度贴吧、知乎的开源自媒体数据采集工具。它能按关键词、按帖子、按创作者主页三种方式抓取笔记/视频内容、评论甚至二级评论，并把结果存成 JSON、CSV、Excel 或数据库。适合做市场调研、竞品监控、内容选题的运营人员，以及想要现成爬虫框架而不想从零写 JS 逆向的开发者。## 从一次"手动抄数据"说起想象这个场景：你负责