​Vue3 常用指令、属性、方法速查表

以下是一份 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 特殊属性

属性