Vue 3 中 .sync 修饰符已被移除，由 v-model 参数化机制替代：默认用 modelValue + update:modelValue，自定义则用 v-model:title 等，需在 defineProps 和 defineEmits 中显式声明。
Vue 3 中 .sync 修饰符已被彻底移除，不是失效，而是被更清晰、更灵活的 v-model 参数化机制取代。在 <script setup> 中，你不能写 :title.sync，必须改用 v-model:title 或默认 v-model，并配合子组件显式声明 prop 和事件。
默认 v-model 绑定：用 modelValue + update:modelValue
这是最常用也最接近 Vue 2 .sync 逻辑的写法，适合单个状态控制（比如弹窗显隐）：
- 父组件直接写
<MyDialog v-model="dialogVisible" /> - 子组件接收
modelValueprop，并声明update:modelValue事件 - 触发更新时调用
emit('update:modelValue', newValue)
自定义 v-model 名称：替代多个 .sync
Vue 2 中常写 :title.sync="t" :content.sync="c"，Vue 3 改为多个独立 v-model:：
vue-composition-api-best-practices
下载
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
- 父组件：
<MyForm v-model:title="pageTitle" v-model:content="pageContent" /> - 子组件需分别定义
title和contentprop，以及对应update:title和update:content事件 - 注意：每个
v-model:xxx都要手动在defineProps和defineEmits中声明
组合式 API 中的关键写法细节
<script setup> 下不能依赖隐式行为，必须显式声明：
立即学习“前端免费学习笔记（深入）”；
- 用
defineProps({ modelValue: Boolean })接收值（类型按需改） - 用
const emit = defineEmits(['update:modelValue'])声明事件 - 绑定事件时不要写
@update:modelValue—— 框架自动处理，你只需emit - 若用自定义名如
v-model:show，prop 名就是show，事件名就是update:show
为什么这样设计更可靠
旧版 .sync 是语法糖，容易和 v-model 混淆，且不支持多绑定；新机制把“传什么值”和“通知谁改”完全显式化：
- prop 名和事件名一一对应，语义明确，IDE 可提示、可校验
- 多个
v-model:允许不同状态解耦，比如同时控制显隐、尺寸、加载态 - 不再需要手动写
@update:xxx监听器，父组件模板更干净
