7.1 Vue 3 语法速查
这页用于回忆写法。首次学习请先读对应章节，尤其注意作用域、生命周期和数据所有权。
状态与派生值
script setup 片段
import { computed, reactive, ref, watch } from 'vue';
const count = ref(0);
const form = reactive({ title: '' });
const doubled = computed(() => count.value * 2);
watch(count, (value, oldValue) => {
console.log(oldValue, value);
});
| 要做什么 | 写法 | 注意 |
|---|---|---|
| 改 ref | count.value++ | 脚本需要 .value |
| 模板显示 ref | {{ count }} | 顶层 ref 自动解包 |
| 改 reactive 字段 | form.title = 'Vue' | 不要随意整体替换代理 |
| 派生状态 | computed(() => ...) | 保持纯计算 |
| 监听对象字段 | watch(() => form.title, ...) | 传 getter |
| 等 DOM 更新 | await nextTick() | 先修改状态再等待 |
模板与事件
各行独立的模板示例
<p>{{ title }}</p>
<button :disabled="saving" @click="save">保存</button>
<form @submit.prevent="submit">...</form>
<input v-model.trim="title" />
<p v-if="error" role="alert">{{ error }}</p>
<p v-else-if="loading">加载中</p>
<ul v-else>
<li v-for="task in tasks" :key="task.id">{{ task.title }}</li>
</ul>
<span :class="{ completed: task.isDone }">...</span>
动态属性用 :，事件用 @，条件和列表都是 Vue 指令。v-else 分支需要紧邻上一个条件元素。
组件接口
组件宏片段
const props = defineProps<{ title: string; disabled?: boolean }>();
const emit = defineEmits<{ save: [title: string] }>();
const model = defineModel<string>({ required: true });
宏无需导入。defineModel 要求 Vue 3.4+。props 向下传，事件向上通知，插槽传模板内容。
<TaskRow :task="task" @remove="remove" />
<TitleInput v-model="title" />
<EmptyState><template #title>暂无任务</template></EmptyState>
数组与 C# 对照
| 目的 | JavaScript | 类似 C# |
|---|---|---|
| 筛选 | items.filter(x => !x.isDone) | Where |
| 投影 | items.map(x => x.title) | Select |
| 查找 | items.find(x => x.id === id) | FirstOrDefault |
| 任意匹配 | items.some(x => x.isDone) | Any |
| 排序副本 | [...items].sort((a,b) => a.id-b.id) | OrderBy 的用途 |
| 兜底空值 | value ?? fallback | ?? |
数组方法大多立即执行；find 未匹配返回 undefined；sort 会原地修改数组。
请求检查
const response = await fetch('/api/tasks');
if (!response.ok) throw new Error(`HTTP ${response.status}`);
const data: unknown = await response.json();
204 不读 JSON；400/500 不一定让 fetch 拒绝；类型断言不能验证服务器数据。详见HTTP 请求。
状态放在哪里
输入框放组件，局部业务状态放组合式函数，可分享筛选放 URL，跨页身份和偏好放 Pinia，真实业务数据由服务端维护。
Pinia 解构状态用 storeToRefs；普通组合式函数返回 ref 对象时可以直接解构。
常用命令
| 项目 | 启动 | 检查 |
|---|---|---|
| 当前文档站 | npm start | npm run typecheck、npm run build |
| Vue 学习项目 | npm run dev | 查看 build 是否含 vue-tsc |
| 附带实战前端 | npm run dev | npm test、npm run build |
| 附带实战 API | dotnet run | dotnet build |
遇到问题继续看常见问题。