Vue.js Cheatsheet - API Reference
Vue 3 日常开发必备语法与 API 都在这里了，从响应式基础到组合式函数，按类别分类整理，写代码时直接复制。
Back to Languages响应式基础 8
const count = ref(0)响应式基本类型
count.value++修改 ref（脚本中需 .value）
const state = reactive({ name: "Vue" })响应式对象
const doubled = computed(() => count.value * 2)只读计算属性
const w = computed({ get: () => v.value, set: (x) => (v.value = x) })可写计算属性
watch(count, (n, o) => {}, { immediate: true })侦听器并立即执行一次
watchEffect(() => console.log(count.value))自动追踪依赖的侦听器
const { name } = toRefs(state)解构对象保持响应式
生命周期 6
onBeforeMount(() => {})挂载前
onMounted(() => {})挂载后（常用于发请求）
onBeforeUpdate(() => {})响应式数据更新前
onUpdated(() => {})响应式数据更新后
onBeforeUnmount(() => {})卸载前（清理副作用）
onUnmounted(() => {})卸载后
组件通信 6
defineProps<{ msg: string }>()声明 props（类型方式）
const emit = defineEmits(["change"])声明向父组件发送的事件
defineExpose({ method() {} })暴露方法给父组件 ref
provide("theme", "dark")向后代组件注入数据
const theme = inject("theme", "light")接收注入并设置默认值
const model = defineModel<string>()双向绑定（Vue 3.4+）
组合式函数 5
function useCounter(n = 0) { const c = ref(n); return { c, inc: () => c.value++ } }自定义计数器钩子
const { c, inc } = useCounter(10)使用自定义组合式函数
function useMouse() { const x = ref(0); const y = ref(0); return { x, y } }封装鼠标位置
function useEventListener(el, ev, cb) { onUnmounted(() => el.removeEventListener(ev, cb)) }封装事件监听并自动清理
function useFetch(url) { /* return { data, error, loading } */ }封装异步请求
路由与状态 7
const route = useRoute()获取当前路由信息
const router = useRouter()获取路由实例
router.push("/users")编程式跳转
router.replace("/login")替换路由（不留历史）
const store = useCounterStore()获取 Pinia store
const { count } = storeToRefs(store)解构 store 状态保持响应式
store.$patch({ count: 1 })批量更新 store 状态
模板语法 8
{{ message }}文本插值
:href="url"属性绑定（v-bind 缩写）
@click="handler"事件绑定（v-on 缩写）
v-model="form.name"双向绑定
v-if / v-else-if / v-else条件渲染
v-for="item in list" :key="item.id"列表渲染（必须加 key）
<Teleport to="body">将内容传送到指定 DOM 节点
<slot name="header" />具名插槽
性能优化 6
const list = shallowRef([])浅响应式（大对象/大列表优化）
markRaw(obj)标记对象永不响应式
v-memo="[a, b]"模板记忆（Vue 3.2+）
defineAsyncComponent(() => import("./Comp.vue"))异步组件懒加载
<KeepAlive include="UserList">缓存组件实例状态
<Suspense>协调异步组件加载
💡 Tips
- ref 用于基本类型，reactive 用于对象；ref 在脚本中需 .value 访问，模板中自动解包。
- computed 有缓存只在依赖变化时重算；watch 默认懒执行，加 immediate: true 可立即触发一次。
- defineProps、defineEmits、defineExpose、defineModel 是编译器宏，无需 import 即可使用。
- 解构 reactive 对象会丢失响应式，用 toRefs 包装后再解构可保持响应式。
- 大列表用 shallowRef + v-memo，路由组件用 defineAsyncComponent 懒加载可提升性能。