以下是一份 Vue3 常用指令、属性、方法速查表，涵盖核心功能、Composition API 及实用技巧，方便快速查阅：
一、模板指令（Directives）
| 指令 |
说明 |
示例 |
v-bind / : |
动态绑定属性（支持简写 :） |
<div :id="dynamicId"> |
v-model |
表单输入双向绑定（支持修饰符） |
<input v-model.trim="text"> |
v-on / @ |
绑定事件（支持简写 @） |
<button @click="handleClick"> |
v-for |
循环渲染元素（需加 key） |
<li v-for="item in list" :key="item.id"> |
v-if / v-else |
条件渲染（动态添加/移除元素） |
<div v-if="show">显示内容</div> |
v-show |
条件显示（通过 display 切换） |
<div v-show="isVisible">显示内容</div> |
v-html |
渲染原始 HTML（注意 XSS 风险） |
<div v-html="rawHtml"></div> |
v-slot |
定义插槽内容（可简写为 #） |
<template #header>标题</template> |
v-pre |
跳过编译（保留原始内容） |
<div v-pre>{{ 此处不编译 }}</div> |
v-once |
只渲染一次（后续更新忽略） |
<div v-once>{{ staticContent }}</div> |
v-memo |
缓存渲染结果（优化性能） |
<div v-memo="[value]">{{ value }}</div> |
二、组件相关属性（Options & Props）
2.1 组件选项
| 属性 |
说明 |
示例 |
props |
定义组件接收的 props（支持类型校验） |
props: { title: String } |
emits |
声明组件触发的事件（推荐显式定义） |
emits: ['update:modelValue'] |
setup() |
Composition API 入口（替代 data/methods） |
setup(props, { emit }) { ... } |
computed |
计算属性（基于响应式依赖缓存） |
computed: { fullName() { ... } } |
watch |
监听数据变化 |
watch: { count(newVal) { ... } } |
2.2 特殊属性
| 属性 |
说明 |
示例 |
ref |
注册模板引用（通过 ref 变量访问） |
<input ref="inputRef"> → const inputRef = ref(null) |
key |
强制更新元素/组件（常用于 v-for） |
<Component :key="id" /> |
is |
动态组件 |
<component :is="currentComponent" /> |
三、Composition API 核心方法
| 方法 |
说明 |
示例 |
ref() |
创建响应式基本类型数据 |
const count = ref(0) |
reactive() |
创建响应式对象 |
const state = reactive({ name: 'Alice' }) |
computed() |
创建计算属性 |
const double = computed(() => count.value * 2) |
watch() |
监听响应式数据变化 |
watch(count, (newVal) => { ... }) |
watchEffect() |
自动追踪依赖的副作用函数 |
watchEffect(() => console.log(count.value)) |
provide() / inject() |
跨组件传递数据（依赖注入） |
provide('key', value) → const val = inject('key') |
toRef() / toRefs() |
将响应式对象属性转为 ref |
const { name } = toRefs(state) |
四、生命周期钩子
选项式 API
| 钩子 |
触发时机 |
beforeCreate |
实例初始化前 |
created |
实例创建完成（数据已初始化） |
beforeMount |
挂载到 DOM 前 |
mounted |
挂载完成（可访问 DOM） |
beforeUpdate |
数据更新前（DOM 未重新渲染） |
updated |
数据更新后（DOM 已重新渲染） |
beforeUnmount |
实例销毁前 |
unmounted |
实例销毁完成 |
Composition API
| 钩子函数 |
等价选项式钩子 |
示例 |
onBeforeMount |
beforeMount |
onBeforeMount(() => { ... }) |
onMounted |
mounted |
onMounted(() => { ... }) |
onBeforeUpdate |
beforeUpdate |
onBeforeUpdate(() => { ... }) |
onUpdated |
updated |
onUpdated(() => { ... }) |
onBeforeUnmount |
beforeUnmount |
onBeforeUnmount(() => { ... }) |
onUnmounted |
unmounted |
onUnmounted(() => { ... }) |
五、路由与状态管理（Vue Router & Pinia）
Vue Router 常用方法
| 方法/属性 |
说明 |
示例 |
useRouter() |
获取路由实例 |
const router = useRouter() |
useRoute() |
获取当前路由信息 |
const route = useRoute() |
router.push() |
导航到新页面 |
router.push('/home') |
router.replace() |
替换当前页面（无历史记录） |
router.replace('/login') |
router.go() |
前进/后退历史记录 |
router.go(-1) |
Pinia 核心 API
| 方法 |
说明 |
示例 |
defineStore() |
创建 Store |
const useStore = defineStore('id', { ... }) |
store.$patch() |
批量更新状态 |
store.$patch({ count: 10 }) |
store.$reset() |
重置状态到初始值 |
store.$reset() |
store.$subscribe() |
监听状态变化 |
store.$subscribe((mutation) => { ... }) |
六、实用代码片段
全局状态管理（Pinia）
// stores/counter.js
import { defineStore } from 'pinia';
export const useCounterStore = defineStore('counter', {
state: () => ({ count: 0 }),
actions: {
increment() { this.count++ }
}
});
// 组件中使用
import { useCounterStore } from '@/stores/counter';
const counter = useCounterStore();
counter.increment();
表单验证（v-model + 修饰符）
<template>
<input v-model.trim="username" @blur="validateUsername">
</template>
<script setup>
const username = ref('');
const validateUsername = () => {
if (!username.value) alert('用户名不能为空');
};
</script>
API 请求封装
import { ref } from 'vue';
import axios from 'axios';
export function useFetch(url) {
const data = ref(null);
const error = ref(null);
axios.get(url)
.then(res => data.value = res.data)
.catch(err => error.value = err);
return { data, error };
}
七、注意事项
- 响应式数据：修改
ref 值需用 .value，reactive 对象可直接修改属性。
- 列表渲染：始终为
v-for 添加唯一的 key，避免渲染错误。
- 样式作用域：使用
<style scoped> 限制组件样式作用域。
- 性能优化：大列表使用
v-memo 或虚拟滚动（如 vue-virtual-scroller）。
资源推荐：
提示：善用 Vue Devtools 浏览器插件调试组件和状态！ 🛠️
📚 推荐阅读
评论区