Vue.js 语法速查表 - Vue 3 常用 API 与组合式编程大全
这张速查面向使用 Vue 3 组合式 API 与 <script setup> 写产品的开发者。内容从响应式基础（ref 与 reactive 的区别）讲到 computed 与 watch，再到 props/emits/provide-inject 的跨组件通信，接着覆盖路由、Pinia 状态管理和模板语法，最后是用 shallowRef、defineAsyncComponent 做性能优化。每条都是能直接贴进现有 SFC 并立刻看到响应式效果的片段。读完你应能用 ref/reactive 管理本地状态、用 watch 响应变化、打通父子组件的数据往来，并给大列表和重组件做懒加载。
响应式基础 8
const count = ref(0)把基本数字 0 变成响应式，脚本里读写都经 count.value
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 })侦听 ref 变化，(n, o) 是新旧值；immediate 让初始立刻触发一次
watchEffect(() => console.log(count.value))自动追踪回调里用到的依赖，任一变化即重跑
const { name } = toRefs(state)把响应式对象解构成一个个 ref，保留响应性
生命周期 6
onBeforeMount(() => {})挂载前，此时 DOM 还未生成
onMounted(() => {})挂载后，DOM 已就绪，常用于发请求或操作 DOM
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>协调异步组件加载
提示
- ref 用于基本类型，reactive 用于对象；ref 在脚本中需 .value 访问，模板中自动解包。
- computed 有缓存只在依赖变化时重算；watch 默认懒执行，加 immediate: true 可立即触发一次。
- defineProps、defineEmits、defineExpose、defineModel 是编译器宏，无需 import 即可使用。
- 解构 reactive 对象会丢失响应式，用 toRefs 包装后再解构可保持响应式。
- 大列表用 shallowRef + v-memo，路由组件用 defineAsyncComponent 懒加载可提升性能。
由 巧匠 维护
公开更新于 2026年7月21日，内容持续校对官方文档。