Vue.js速查表
Vue 3核心语法速查表，涵盖Composition API、模板语法、响应式系统、组件、生命周期、指令等常用API参考。
🧩 Composition API
| API | 说明 |
|---|---|
setup() | 组合式API入口，在props解析后执行 |
ref(value) | 创建响应式基本类型引用，通过 .value 访问 |
reactive(obj) | 创建响应式对象（深度响应式） |
computed(() => expr) | 计算属性，依赖变化自动更新 |
computed({ get, set }) | 可读写的计算属性 |
watch(source, callback) | 侦听响应式数据变化 |
watch(() => count.value, (newVal, oldVal) => {}) | 侦听getter函数 |
watch([ref1, ref2], ([n1,n2],[o1,o2]) => {}) | 侦听多个数据源 |
watchEffect(() => { ... }) | 自动追踪依赖并执行 |
watchPostEffect(() => { ... }) | DOM更新后执行的侦听器 |
toRef(obj, "key") | 从reactive对象提取单个ref |
toRefs(obj) | 将reactive对象转为ref对象集合 |
readonly(obj) | 创建只读代理 |
shallowRef(value) | 浅层响应式ref |
shallowReactive(obj) | 浅层响应式对象 |
customRef(factory) | 自定义ref，控制跟踪和触发 |
📋 模板语法
| 语法 | 说明 |
|---|---|
{{ expression }} | 文本插值 |
v-html="rawHtml" | 输出原始HTML |
v-bind:attr="value" / :attr="value" | 动态绑定属性 |
:class="{ active: isActive, 'text-bold': isBold }" | 动态绑定class（对象语法） |
:class="[activeClass, boldClass]" | 动态绑定class（数组语法） |
:style="{ color: textColor, fontSize: size + 'px' }" | 动态绑定内联样式 |
v-on:event="handler" / @event="handler" | 事件绑定 |
@click.prevent="submit" | 事件修饰符（阻止默认行为） |
@keyup.enter="submit" | 按键修饰符 |
v-model="value" | 双向数据绑定 |
v-model.lazy | 在change时同步（非input） |
v-model.number | 自动转为数字类型 |
v-model.trim | 自动去除首尾空白 |
🧩 组件
| 语法 | 说明 |
|---|---|
defineProps({ name: String }) | 声明组件props |
const { name } = defineProps(["name"]) | 解构props |
defineEmits(["update", "delete"]) | 声明组件触发的事件 |
emit("update", newValue) | 触发自定义事件 |
<slot /> | 默认插槽 |
<slot name="header">默认内容</slot> | 具名插槽 |
<slot :item="item"></slot> | 作用域插槽（向插槽传递数据） |
provide("key", value) | 向后代组件提供数据 |
inject("key") | 注入祖先组件提供的数据 |
<component :is="currentComponent" /> | 动态组件 |
defineExpose({ method }) | 对外暴露组件内部方法/属性 |
🔄 生命周期
| 钩子 | 说明 |
|---|---|
onBeforeMount(() => {}) | 挂载前调用 |
onMounted(() => {}) | 组件挂载完成后调用 |
onBeforeUpdate(() => {}) | 更新前调用 |
onUpdated(() => {}) | 组件更新完成后调用 |
onBeforeUnmount(() => {}) | 卸载前调用 |
onUnmounted(() => {}) | 组件卸载完成后调用 |
onActivated(() => {}) | keep-alive激活时调用 |
onDeactivated(() => {}) | keep-alive失活时调用 |
onErrorCaptured((err, instance, info) => {}) | 捕获后代组件错误 |
⚡ 响应式系统
| API | 说明 |
|---|---|
ref(value) | 基本类型响应式引用，JS中用.value |
reactive(obj) | 对象类型深度响应式 |
toRef(obj, "key") | 将reactive的属性转为ref |
toRefs(obj) | 将reactive对象所有属性转为ref |
shallowRef(value) | 浅层响应式，仅.value变化触发 |
shallowReactive(obj) | 浅层响应式对象 |
triggerRef(ref) | 强制触发shallowRef更新 |
customRef((track, trigger) => ({ get, set })) | 自定义响应式行为 |
isRef(value) | 判断是否为ref |
unref(value) | 如果为ref则返回.value，否则返回原值 |
isReactive(obj) | 判断是否为reactive代理 |
toRaw(obj) | 获取原始对象（非代理） |
markRaw(obj) | 标记对象不可转为响应式 |
📌 内置指令
| 指令 | 说明 |
|---|---|
v-model | 表单元素双向绑定 |
v-model="value" | 基本双向绑定 |
v-show="isVisible" | 切换CSS display属性 |
v-if / v-else-if / v-else | 条件渲染（销毁/重建DOM） |
v-for="item in items" :key="item.id" | 列表渲染 |
v-for="(value, key, index) in obj" | 遍历对象 |
v-slot:name / #name | 插槽指令 |
v-pre | 跳过编译（显示原始Mustache语法） |
v-once | 只渲染一次，后续更新跳过 |
v-memo="[dep1, dep2]" | 记忆渲染（依赖不变则跳过虚拟DOM对比） |
v-cloak | 隐藏未编译的模板内容（配合CSS） |
🔧 组合式函数
| 模式 | 说明 |
|---|---|
function useMouse() { ... return { x, y } } | 定义组合式函数（约定以use开头） |
const { x, y } = useMouse() | 在组件中使用组合式函数 |
function useFetch(url) { const data = ref(null); ... return { data, loading, error } } | 封装数据获取逻辑 |
function useLocalStorage(key, default) { ... } | 封装本地存储逻辑 |
function useDebounce(value, delay) { ... } | 封装防抖逻辑 |
function useToggle(initial) { const val = ref(initial); const toggle = () => val.value = !val.value; return { val, toggle } } | 封装状态切换逻辑 |
onMounted(() => { ... }) | 组合式函数中也可使用生命周期钩子 |
provide/inject | 在组合式函数中提供跨层级数据 |
🛠️ 工具函数
| API | 说明 |
|---|---|
nextTick(callback) | DOM更新后执行回调 |
await nextTick() | 以Promise方式等待DOM更新 |
provide("key", value) | 向后代组件提供数据 |
inject("key") | 注入祖先组件的数据 |
inject("key", defaultValue) | 注入数据并设置默认值 |
<Teleport to="body">...</Teleport> | 将子组件渲染到DOM其他位置 |
<Teleport to="#modal">...</Teleport> | 传送到指定DOM节点 |
<Suspense>...</Suspense> | 异步组件加载状态管理 |
<Suspense #fallback><Loading/></Suspense> | 指定加载中显示内容 |
defineAsyncComponent(() => import("./Comp")) | 异步组件定义 |
getCurrentInstance() | 获取当前组件实例（仅调试用） |
h(VNode, props, children) | 手动创建虚拟节点 |
关于Vue.js
Vue 3是一套用于构建用户界面的渐进式JavaScript框架，Composition API提供了更好的逻辑复用和代码组织能力。掌握这些核心API可以帮助你高效地构建可维护的现代Web应用。建议配合Vue DevTools进行调试。