vue3中的编译器宏
编译器宏是指在<script setup>特有使用的，无需引入在编译阶段会被处理，从而使得代码更加简洁和声明式。
# defineProps
声明组件的props。它接收一个对象，该对象的结构与组件选项中的props选项相同。
// 类型声明
const props = defineProps<{
msg: string;
idx: Number;
record: { type: Object, default: () => {}}
}>()
// 运行时
const props2 = defineProps({
msg: String,
idx: Number,
record: { type: Object, default: () => {}}
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
以上两种方式都可以用来定义props结构，效果是一样的，但两种方式不能同时使用否则会报错
// 不允许使用这种写法，会报错
const props = defineProps<{ msg: String}>({ idx: Number})
1
2
2
# withDefaults
用于在使用defineProps时，提供一个默认值给props。
const props = defineProps<{
msg: string;
idx: Number;
record: { type: Object, default: () => {}}
}>()
withDefaults(props, {
msg: 'ok',
idx: 1
})
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
如上，我们将props的变量msg和idx分别设置了默认值
# defineEmits
声明组件的emits选项，定义组件可以向父组件emit 的事件，所有的emit`事件都必须先声明。
const myEmit = defineEmits(['change', 'beforeChange'])
const emit = defineEmits<{
(e: 'change', id: number): void
(e: 'beforeChange', value: string): void
}>()
1
2
3
4
5
6
2
3
4
5
6
# defineModel
这个宏可以用来声明一个双向绑定prop，通过父组件的v-model来使用，可以看另一篇文章vue3实现v-model
# defineExpose
将内部变量和方法暴露给模板，以便它们可以在模板中被访问。如果外部需要访问内部变量需要使用该方法进行处理。
const title = ref('1')
const user = ref({})
const init = () => {
}
defineExpose({ title: title, init: init })
1
2
3
4
5
6
2
3
4
5
6
如上，我们将内部的title变量和init方法暴露到外部，外部可以使用ref.value.title、ref.value.init()来获取属性或调用方法，没有暴露的user属性是无法访问的
除以上常用的宏以外，vue3还有useSlot、useAttrs、defineSlots等，具体请前往官方文档
上次更新: 2025/09/05, 8:09:00