Vue 参考手册

最后更新：2026-10-22

Vue 参考手册

按字母序排列的 121 个 Vue API 条目：指令、组合式 API、选项式 API、内置组件与全局 API。

#
$attrs	$attrs 汇集父组件传入但未被 props 声明的属性，配合 inheritAttrs: false 精确分发。
$emit()	$emit 触发自定义事件，参数原样传给父组件的监听函数，是子组件向父组件反馈的标准通道。
$refs	$refs 保存模板里 ref 属性标记的元素或组件实例：脚本里借此访问 DOM 或调用子组件方法。
<component>	<component :is="..."> 按数据动态切换渲染的组件或原生元素，是标签页、路由视图等的底层机制。
<KeepAlive>	<KeepAlive> 缓存被包裹组件的实例：切换回来时保留状态、跳过重新渲染（常用于标签页、路由视图）。
<slot>	<slot> 声明子组件模板中的内容出口：父组件传入的内容会替换到这里，可带默认（兜底）内容。
<Suspense>	<Suspense> 在异步依赖（异步组件、async setup）就绪前显示兜底内容，就绪后切换到真实内容。
<Teleport>	<Teleport> 把内容渲染到页面其他位置（如 body），解决弹窗、下拉菜单被父容器 overflow 裁剪或层级受限的问题。
<template>	<template> 是透明的分组容器：本身不渲染元素，用于给 v-if / v-for 分组或多分支内容占位。
<Transition>	<Transition> 包裹单个元素或组件，在其插入/移除时自动应用 CSS 过渡类名或 JS 钩子。
<TransitionGroup>	<TransitionGroup> 为多个元素提供进出场过渡，并通过 FLIP 技术实现位置的平滑移动。
A
activated	activated 在被 <KeepAlive> 缓存的组件重新显示时调用：恢复轮询、刷新数据。
app.component()	app.component() 全局注册组件：所有组件模板都能直接使用，适合按钮、图标等基础组件。
app.config	app.config 提供应用级配置：errorHandler、warnHandler、globalProperties、performance 等。
app.directive()	app.directive() 注册全局自定义指令：在任何组件模板里用 v-xxx 使用，适合权限、点击外部等通用行为。
app.mount()	app.mount() 把应用挂载到容器元素：容器内部会被应用渲染的 DOM 替换。
app.provide()	app.provide() 在应用级别提供依赖：所有组件都能 inject，适合全局配置、i18n 实例等。
app.use()	app.use() 安装插件：插件可以注册全局组件、指令、注入依赖或补充应用配置（如路由、状态管理）。
B
beforeCreate	beforeCreate 在实例初始化之前调用：此时 data、methods、computed 都还没建立，所以很少使用。
beforeMount	beforeMount 在首次渲染发生之前调用：渲染函数已就绪，但 DOM 还没建立。
beforeUnmount	beforeUnmount 在实例销毁之前调用：DOM 仍可用，适合清理定时器、监听器与第三方实例。
beforeUpdate	beforeUpdate 在数据变化、DOM 即将更新之前调用：此时读到的还是旧 DOM。
C
components	components 选项在局部注册子组件：只在该组件内可用，避免全局污染（优于全局注册）。
computed	computed 选项声明派生值：依赖变化时自动重算并缓存，模板里像普通属性一样使用。
computed()	computed() 根据其他响应式数据推导出一个新值，结果会被缓存：只有依赖变化时才重新计算。
createApp()	createApp() 用根组件创建应用实例，返回的 app 对象提供注册组件、安装插件、挂载等应用级能力。
created	created 在实例初始化完成、数据与方法都可用之后调用：此时还没有 DOM，适合初始化数据、发起请求。
createSSRApp()	createSSRApp() 与 createApp 相同，但采用注水（hydration）方式接管服务端渲染的 HTML。
customRef()	customRef() 用工厂函数自定义依赖追踪与触发时机，典型用途是给输入框加防抖。
D
data	data 选项声明组件的响应式状态：必须写成返回对象的函数，保证每个实例拥有独立数据。
deactivated	deactivated 在被 <KeepAlive> 缓存的组件隐藏时调用：组件未销毁，适合暂停定时器。
defineAsyncComponent()	defineAsyncComponent() 创建按需加载的组件：首次渲染时才加载代码，用于路由级/重型组件的懒加载。
defineComponent()	defineComponent() 是类型推导辅助函数：主要在 TypeScript 项目中为组件选项提供精确类型，运行时行为与直接写对象相同。
defineCustomElement()	defineCustomElement() 把 Vue 组件包装成标准 Web Component：可在任何框架/原生页面里用 <my-element> 标签消费。
E
effectScope()	effectScope() 创建一个作用域，把多个侦听器/计算属性收在一起统一启动与停止，避免逐个管理 stop 函数。
emits	emits 选项声明组件会向父组件发出的事件，起到文档与运行时校验作用（未声明的事件会警告）。
errorCaptured	errorCaptured 捕获后代组件的错误：返回 false 可阻止继续向上冒泡到全局处理器。
expose	expose 选项限制父组件通过模板引用访问到哪些成员：默认全部暴露，声明后只暴露指定项。
G
getCurrentScope()	getCurrentScope() 返回当前的 effectScope（若无则 undefined），用于在工具函数里把副作用挂到调用方的作用域。
H
h()	h() 创建虚拟节点（VNode）：render 函数与 JSX 的底层 API，也用于动态生成结构。
hasInjectionContext()	hasInjectionContext() 判断当前是否处于可用 inject 的上下文（setup 或组件内部），写公共工具函数时用来做前置检查。
I
inheritAttrs	inheritAttrs 设为 false 时，未声明的属性不再自动落在根元素上，配合 $attrs 可精确分发到内部元素。
inject	inject 选项声明要注入的依赖：数组形式不设默认值，对象形式可写 from（换源）与 default（默认值）。
inject()	inject() 在任意后代组件取用祖先 provide 的数据，可给默认值兜底。
is	is 属性指定 <component> 渲染哪个组件或原生标签；也用于原生元素切换（如 table 里换 tr/td）。
isProxy()	isProxy() 判断值是否由 reactive() 或 readonly() 创建的代理。
isReactive()	isReactive() 判断值是否由 reactive()（或其子代理）创建。
isReadonly()	isReadonly() 判断值是否由 readonly() 创建（含嵌套的只读代理）。
isRef()	isRef() 判断一个值是否是 ref 对象，常用于工具函数里区分普通值与响应式引用。
K
key	key 是 v-for 的身份标识：帮助 Vue 精确复用/重建节点，保证列表增删时的状态正确。
M
markRaw()	markRaw() 标记对象后，即使被放进响应式结构也不会被代理，适合第三方实例或大型静态数据。
mergeProps()	mergeProps() 合并多个属性对象：class 与 style 会拼接、事件监听会全部保留，后者的其他属性覆盖前者。
methods	methods 选项集中声明组件方法：事件处理、工具函数都写在这里，模板中通过名字调用。
mounted	mounted 在组件渲染并插入 DOM 之后调用：操作模板引用、初始化第三方库、测量尺寸的标准位置。
N
name	name 选项为组件命名：影响开发者工具显示、递归组件自引用与错误信息可读性。
nextTick()	nextTick() 返回 Promise，在下次 DOM 更新完成后 resolve：数据刚改完想读最新 DOM 时使用。
O
onActivated()	onActivated() 在被 <KeepAlive> 缓存的组件重新显示（激活）时调用：适合恢复定时器、刷新数据。
onBeforeMount()	onBeforeMount() 在组件首次渲染到 DOM 之前调用：此时模板已编译，但真实 DOM 尚未创建。
onBeforeUnmount()	onBeforeUnmount() 在组件即将销毁前调用：DOM 仍可用，是手动清理定时器、监听、第三方实例的最后时机。
onBeforeUpdate()	onBeforeUpdate() 在响应式数据变化、DOM 即将更新之前调用：此时可读取更新前的 DOM 状态。
onDeactivated()	onDeactivated() 在被 <KeepAlive> 缓存的组件隐藏（停用）时调用：组件未销毁，适合暂停定时器。
onErrorCaptured()	onErrorCaptured() 捕获后代组件渲染/生命周期/侦听器抛出的错误，可阻止错误继续向上冒泡。
onMounted()	onMounted() 在组件及其子组件挂载到 DOM 后调用：拿模板引用、初始化第三方库、发起请求的标准位置。
onRenderTracked()	onRenderTracked() 在组件渲染期间每收集一个响应式依赖就调用一次，配合调试器可看清“谁让我重渲染”。
onRenderTriggered()	onRenderTriggered() 在某个依赖变化导致组件重新渲染时调用，直接告诉你“是谁触发了这次更新”。
onScopeDispose()	onScopeDispose() 在当前作用域停止时执行清理：写组合式函数时用它注销全局监听、定时器等资源。
onServerPrefetch()	onServerPrefetch() 只在服务端渲染时执行：等它完成后才渲染 HTML，用于在 SSR 阶段预取异步数据。
onUnmounted()	onUnmounted() 在组件销毁、DOM 移除、所有响应式副作用停止之后调用。
onUpdated()	onUpdated() 在组件因响应式变化重新渲染并更新 DOM 之后调用：适合读取更新后的 DOM 尺寸或同步第三方库。
onWatcherCleanup()	onWatcherCleanup() 注册清理函数：侦听器失效（重新执行或停止）前调用，用于取消请求、定时器等。
P
props	props 声明组件对外接收的属性，支持数组简写与对象式的类型、必填、默认值校验。
provide	provide 选项以对象或函数形式向后代提供数据：对象形式提供静态值，函数形式可用 this 访问组件状态。
provide()	provide() 在祖先组件提供数据，任何层级后代都能用 inject 获取，避免逐层透传 props。
R
reactive()	reactive() 把对象或数组包装成深度响应式代理，直接读写属性即可触发更新。
readonly()	readonly() 创建原数据的只读代理：任何写入都会警告并失败，用于防止数据被意外修改。
ref	ref 属性为元素或组件打上引用名，脚本中通过 $refs 或组合式 ref()/useTemplateRef() 访问。
ref()	ref() 把任意值包装成响应式对象，通过 .value 读写；用于基本类型（字符串/数字/布尔）和需要整体替换的对象。
render	render 选项用函数返回虚拟节点，替代模板：需要完全用 JS 表达结构（或动态层级很深）时使用。
renderToString()	renderToString() 在 Node 服务端把应用渲染成 HTML 字符串：SSR 的输出环节，配合 createSSRApp 在客户端注水。
resolveComponent()	resolveComponent() 在渲染函数里按注册名解析组件：拿到组件定义后即可用 h() 渲染它。
S
shallowReactive()	shallowReactive() 只让对象第一层属性响应式，嵌套对象保持不变（不被代理）。
shallowReadonly()	shallowReadonly() 只让第一层属性只读，嵌套对象仍可修改。
shallowRef()	shallowRef() 只追踪 .value 的替换，不深度代理内部对象：整体换掉才触发更新，内部属性改动不触发。
slots	slots 选项以函数形式声明对插槽的访问，并在编译期生成 $slots：让“是否传入插槽”也能参与依赖追踪。
T
template	template 选项为组件指定 HTML 模板字符串：运行时编译成渲染函数（完整版 Vue 支持，构建版通常写在 SFC 文件里）。
toRaw()	toRaw() 返回代理背后的原始对象：需要绕过响应式追踪、或把数据交给外部库时使用。
toRef()	toRef() 把响应式对象的某个属性转成 ref，双向保持连接：通过它读写等于操作原属性。
toRefs()	toRefs() 把响应式对象的每个属性转成 ref，解构后仍保持响应性，是解构 reactive 状态的标准做法。
toValue()	toValue() 把普通值、ref、getter 函数统一取为当前值：可复用函数接收三种输入形态，调用方无需区分。
triggerRef()	triggerRef() 手动触发与 shallowRef 关联的副作用：内部改动 Vue 追踪不到时用它补一次通知。
U
unmounted	unmounted 在实例销毁、DOM 移除之后调用：做最后的资源释放与状态复位。
unref()	unref() 是 isRef(v) ? v.value : v 的简写：ref 取出内部值，普通值原样返回。
updated	updated 在数据变化导致重新渲染、DOM 更新完成之后调用：适合重新测量或同步第三方组件。
useAttrs()	useAttrs() 返回未被 props/emits 声明的透传属性（class、id、事件监听等），用于手动分发。
useHost()	useHost() 在自定义元素内部获取宿主元素（shadow DOM 的宿主），用于操作宿主属性或样式。
useId()	useId() 返回每个组件实例稳定唯一的 ID 字符串：用于 label/for、aria 关联等可访问性属性，保证 SSR 与客户端一致。
useModel()	useModel() 在 <script setup> 里定义可写模型：父组件 v-model 绑定到本组件时，用它读写这个值。
useSlots()	useSlots() 返回父组件传入的插槽函数集合，用于在脚本里判断“有没有传某个插槽”或手动渲染。
useSSRContext()	useSSRContext() 在服务端渲染期间获取上下文对象：用它挂载需要在客户端注水时复用的数据。
useTemplateRef()	useTemplateRef() 用字符串键取同名 ref 属性的模板引用，省去“声明一个同名变量”的样板代码。
V
v-bind (:)	v-bind 把表达式结果绑定到 HTML 属性，简写为冒号：:href="url"；class/style 支持对象与数组语法。
v-cloak	v-cloak 在编译完成前保留该属性，配合 CSS 隐藏原始模板，避免首次加载时闪现 {{ }}。
v-else	v-else 为 v-if 提供「否则」分支：v-if 为假时渲染它，不需要表达式。
v-else-if	v-else-if 串联多个条件分支，依次判断直到某个条件为真。
v-for	v-for 按数组或对象迭代渲染一组元素，语法 item in items；务必提供 key 帮助 Vue 高效更新。
v-html	v-html 把字符串当作 HTML 解析并插入元素内部，用于渲染富文本。
v-if	v-if 按表达式的真假值决定是否渲染这段元素：条件为假时元素被真正销毁并从 DOM 中移除，条件变真时重新创建。
v-memo	v-memo 接收依赖数组：数组值不变时跳过整个子树的更新，用于超长列表的性能优化（Vue 3.2+）。
v-model	v-model 在表单控件与数据之间建立双向绑定：输入即更新数据，数据变化即回填控件。
v-on (@)	v-on 绑定事件监听器，简写为 @：@click="handler"；支持内联表达式与修饰符（.stop/.prevent/.once 等）。
v-once	v-once 让元素只渲染一次：之后即使依赖数据变化也不会重新渲染，用于静态内容优化。
v-pre	v-pre 跳过该元素及其子元素的编译：原样输出双大括号等模板语法，用于展示模板代码本身。
v-show	v-show 按表达式真假切换元素的 display 样式：元素始终保留在 DOM 中，只是隐藏或显示。
v-slot (#)	v-slot 指定插槽内容，简写为 #：用于将模板片段传给子组件的具名插槽或作用域插槽。
v-text	v-text 把表达式的值作为元素的文本内容，等价于双大括号插值，但会整体替换元素原有内容。
W
watch	watch 选项按“被侦听的数据名”组织回调：支持 handler、deep、immediate 与字符串方法名简写。
watch()	watch() 侦听一个或多个响应式源，变化时执行回调，可以拿到新旧值，适合有副作用的响应逻辑。
watchEffect()	watchEffect() 立即执行传入的函数，并自动追踪其中用到的响应式数据：依赖变化即重新执行。
watchPostEffect()	watchPostEffect() 等价于 watchEffect 加 flush: 'post'：在组件 DOM 更新之后执行，适合读取更新后的 DOM 尺寸。
watchSyncEffect()	watchSyncEffect() 等价于 watchEffect 加 flush: 'sync'：依赖一变立即同步执行，不做批处理。
withModifiers()	withModifiers() 在渲染函数里为事件处理函数加上修饰符行为（stop、prevent、once 等）。

Web-Tutorial 技术团队

由多位开发者共同维护的编程教程平台。每篇教程由对应领域的开发者编写和审核，确保内容准确可靠。如发现任何问题，欢迎向我们反馈。

关于我们

Vue 参考手册

Vue 参考手册

🙏 帮我们做得更好