Vue 宏与社区提案
vue-macros 库、实验性的 defineModel、defineOptions，以及 setupSFC 提案
Vue 宏与社区提案 是 CoddyKit 上的免费 Vue Academy 课时。 这是第 3 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Vue Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Vue Academy 课程共包含 4 节课。
script setup 中的编译器宏
在 <script setup> 中，Vue 提供了编译器宏——例如 defineProps 和 defineEmits，它们会在编译时处理，而不是在运行时导入。Vue 3.4 及更高版本又增加了更多宏，社区项目 vue-macros 也在尝试提供更多宏。
vue-macros：实验创新的试验场
vue-macros 是一个社区库，提供早于 Vue 核心功能（或超出其范围）的实验性宏。成功的想法有时会进入核心功能——defineModel 就是在这里起步，后来才变得稳定。
// vite.config
import VueMacros from 'unplugin-vue-macros/vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [VueMacros({ plugins: { vue: vue() } })]
})defineModel：旧方式
在 defineModel 之前，要在组件上实现 v-model，就必须声明一个 modelValue 属性，并手动触发 update:modelValue——代码冗长且容易出错。
<script setup>
const props = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])
function onInput(e) {
emit('update:modelValue', e.target.value)
}
</script>defineModel：在 Vue 3.4 中稳定
defineModel 在 Vue 3.4 中变得稳定。它会返回一个可写的 ref，并自动将其与属性和更新事件连接起来。读取它可以获取值；为它赋值则会触发更新。
<script setup>
const model = defineModel()
// model.value reads modelValue
// model.value = x emits update:modelValue
</script>
<template>
<input v-model="model" />
</template>命名和类型化的 defineModel
defineModel 支持命名模型（v-model:title）以及 required 和类型等选项，其行为与 defineProps 类似。
<script setup>
const title = defineModel('title', { type: String, required: true })
const count = defineModel('count', { default: 0 })
</script>轻松实现多个 v-model
借助命名模型，组件可以简洁地公开多个双向绑定——以前这需要许多属性与 emit 配对才能实现。
<!-- parent -->
<UserForm v-model:name="name" v-model:email="email" />
<!-- UserForm script setup -->
<!-- const name = defineModel('name') -->
<!-- const email = defineModel('email') -->defineOptions
defineOptions（在 Vue 3.3 中稳定）允许您直接在 <script setup> 内设置 name 和 inheritAttrs 等组件选项，从而不再需要第二个 <script> 块。
<script setup>
defineOptions({
name: 'UserCard',
inheritAttrs: false
})
</script>为什么 name 和 inheritAttrs 很重要
组件的 name 有助于开发者工具、递归以及 <KeepAlive> 的包含与排除。inheritAttrs: false 会停止属性自动透传，因此您可以通过 v-bind="$attrs" 将属性放置到指定的内部元素上。
<script setup>
defineOptions({ inheritAttrs: false })
</script>
<template>
<div class="wrapper">
<input v-bind="$attrs" />
</div>
</template>其他值得注意的宏
Vue 还提供了 defineExpose（控制父组件 ref 可以访问的内容）、defineSlots（为插槽添加类型）和 withDefaults（为基于类型的属性设置默认值）。了解这些宏可以完善您的 <script setup> 工具集。
<script setup lang="ts">
const props = withDefaults(
defineProps<{ size?: 'sm' | 'lg' }>(),
{ size: 'sm' }
)
defineExpose({ focus })
</script>实验性宏与稳定宏：谨慎选择
核心中的稳定宏（defineModel、defineOptions）可以安全地用于生产环境。vue-macros 中的实验功能适合原型开发和提前采用，但 API 可能会改变——在要发布的应用中使用时请谨慎控制。
关注社区提案
新想法会以 RFC 提案和 vue-macros 功能的形式出现。关注这些内容有助于您预判框架的发展方向，也能让您在功能稳定之前提供反馈。
快速检查
请测试您对 Vue 宏的理解。
回顾
您已经了解了宏和提案：
vue-macros承载实验性宏，其中一些最终会进入核心功能- defineModel（在 3.4 中稳定）简化了组件的
v-model - 命名模型和类型化模型支持多个简洁的双向绑定
- defineOptions 可在
<script setup>中设置name/inheritAttrs - 生产环境优先使用稳定宏；对实验功能保持谨慎
常见问题解答
「Vue 宏与社区提案」课时是免费的吗？
是的 — 「Vue 宏与社区提案」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Vue Academy 课程的其余内容，请升级到 CoddyKit PRO。 Vue Academy 课程共包含 4 节课。
「Vue 宏与社区提案」这节课中我会学到什么？
vue-macros 库、实验性的 defineModel、defineOptions，以及 setupSFC 提案 你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Vue Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 Vue Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 3 节课，共 4 节。
「Vue 宏与社区提案」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 Vue Academy 课中编写并运行代码吗？
能。每节 Vue Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。