Vue 3 速查
共 21 条 Vue 3 常用写法，覆盖组件结构、响应式、模板指令、工程与命令四组内容。 支持搜索与分类筛选，点击即可复制。
组件结构
Vue 3 推荐 <script setup>。
| 语法 / 命令 | 说明 |
|---|---|
| 单文件组件（SFC）的脚本块 | |
| 模板与插值 | |
| 声明 props（接收父组件数据） | |
| 声明事件并 emit("change") | |
| 插槽（具名插槽用 v-slot） |
响应式
ref / reactive / computed / watch。
| 语法 / 命令 | 说明 |
|---|---|
| 基本响应式（模板里自动解包，脚本里用 n.value） | |
| 对象响应式 | |
| 计算属性（依赖变化自动更新） | |
| 监听变化（watchEffect 自动收集依赖） | |
| 把 props 转为可解构的 ref |
模板指令
v- 前缀。
| 语法 / 命令 | 说明 |
|---|---|
| 条件渲染（切换成本高，频繁切换用 v-show） | |
| 仅切换 display | |
| 列表渲染（必须给 key） | |
| 表单双向绑定 | |
| : 是 v-bind 简写，绑定属性 | |
| @ 是 v-on 简写，绑定事件 |
工程与命令
脚手架与常用命令。
| 语法 / 命令 | 说明 |
|---|---|
| 创建 Vue 3 项目（官方脚手架） | |
| 用 Vite 创建 Vue 项目 | |
| 开发 / 构建 / 预览 | |
| 安装路由与状态管理 | |
| 生命周期钩子（还有 onUpdated / onUnmounted） |
使用说明
Vue 3 速查：组件结构、响应式、模板指令、工程命令；支持搜索与分类筛选，点击即可复制。
- 按用途点分类：组件结构、响应式、模板指令、工程与命令。
- 点「语法 / 命令」列复制片段，替换变量与组件名。
- 组合式 API 用 ref / computed / watch，模板指令用 v-if / v-for / v-model。
- 项目用 npm create vue@latest 或 Vite 起手，npm run dev 开发。
常见问题
- ref 和 reactive 有什么区别？
- ref 可包裹任意值（基本类型 / 对象），在脚本里要 .value、模板里自动解包；reactive 只用于对象，直接访问属性。简单值用 ref 更通用。
- v-if 和 v-show 有什么区别？
- v-if 真正地创建 / 销毁元素（切换成本高）；v-show 只切换 display（始终渲染）。频繁切换用 v-show，条件较少变化用 v-if。
- 为什么 v-for 要加 key？
- key 帮助 Vue 高效复用与正确更新列表项，用稳定唯一值（如 id）。不加或用下标会造成状态错位等问题。
- Vue 3 的 <script setup> 有什么好处？
- 它是组合式 API 的语法糖：更少的样板、自动暴露顶层绑定给模板、按需编译，写起来更简洁，是 Vue 3 推荐写法。