前言
从Vue3开始vue开始引入了宏的概念，例如defineProps、defineEmits等。我们几乎每天在开发过程中都会用到，但是我们有没有考虑过，这些宏到底是什么？为什么不需要手动import?为什么只能在setup顶层中使用？
一、什么是宏？
在解释vue3中的宏之前，我们先了解一下宏的定义是什么？
官方解释：计算机科学里的宏是一种抽象（Abstraction）,它根据一系列预定义的规则替换一定的文本模式。解释器或编译器在遇到宏时会自动进行这一模式替换。对于编译语言，宏展开在编译时发生，进行宏展开的工具常被称为宏展开器。
二、vue文件如何渲染到浏览器上
我们知道，浏览器是不认识.vue为后缀的文件的，只认识html、js、css等文件。所以第一步就是通过webpack或者vite将一个vue文件编译为一个包含render函数的js文件。然后执行render函数生成虚拟DOM，再调用浏览器的DOM API根据虚拟DOM生成真实DOM挂载到浏览器上。
VUE文件 --> 经过webpack或者vite编译 --> js文件（包含render函数） --> 执行render函数 --> 虚拟DOM --> 调用浏览器的DOM API-->真实DOM
三、vue3的宏是什么？
VUE官方解释：宏是一种特殊的代码，由编译器处理并转换为其他的东西。它们实际上是一种更巧妙的字符串替换形式。
四、宏在哪个阶段运行？
vue文件渲染到浏览器上主要经历两个阶段，编译时和运行时。
编译时，也就是vue文件通过webpack或者vite编译变成包含render函数的js文件。此时的运行环境是nodejs环境，所以这个阶段可以调用nodejs相关的API，但是没有在浏览器环境执行，所以无法调用浏览器的API。
运行时，也就是浏览器开始执行js文件中的render函数，然后生成虚拟DOM和真实DOM。此时的运行环境是在浏览器环境内，所以可以调用浏览器API，但无法调用nodejs的API。
而宏就作用于编译时，也就是从vue文件编译成js文件的这一过程中。
举个例子，defineProps在编译时defineProps宏就会被转换定义props相关的代码，当在浏览器运行时自然也就没有了defineProps宏相关的代码了。所以说宏是在编译时执行的代码，而不是运行时执行的代码。
五、一个defineProps宏的例子
<template>
<div>content is {{ content }}</div>
<div>title is {{ title }}</div>
</template>
<script setup lang="ts">
import {ref} from "vue"
const props = defineProps({
content: String,
});
const title = ref("title")
</script>
我们使用defineProps宏定义了一个类型为String,属性名为content的props,并且在template中渲染content的内容。
我们接下来再看看编译成js文件后的代码（简化版）：
import { defineComponent as _defineComponent } from "vue";
import { ref } from "vue";
const __sfc__ = _defineComponent({
props: {
content: String,
},
setup(__props) {
const props = __props;
const title = ref("title");
const __returned__ = { props, title };
return __returned__;
},
});
import {
toDisplayString as _toDisplayString,
createElementVNode as _createElementVNode,
Fragment as _Fragment,
openBlock as _openBlock,
createElementBlock as _createElementBlock,
} from "vue";
function render(_ctx, _cache, $props, $setup) {
return (
_openBlock(),
_createElementBlock(
_Fragment,
null,
[
_createElementVNode(
"div",
null,
"content is " + _toDisplayString($props.content),
1 /* TEXT */
),
_createElementVNode(
"div",
null,
"title is " + _toDisplayString($setup.title),
1 /* TEXT */
),
],
64 /* STABLE_FRAGMENT */
)
);
}
__sfc__.render = render;
export default __sfc__;
我们可以看到编译后的js文件主要由两部分组成，第一部分为执行defineComponent函数生成一个 __sfc__ 对象，第二部分为一个render函数。render函数不是我们这篇文章要讲的，我们主要来看看这个__sfc__对象。
看到defineComponent是不是觉得很眼熟，没错这个就是vue提供的API中的 definecomponent函数。这个函数在运行时没有任何操作，仅用于提供类型推导。这个函数接收的第一个参数就是组件选项对象，返回值就是该组件本身。所以这个__sfc__对象就是我们的vue文件中的script代码经过编译后生成的对象，后面再通过__sfc__.render = render将render函数赋值到组件对象的render方法上面。
我们这里的组件选项对象经过编译后只有两个了，分别是props属性和setup方法。明显可以发现我们原本在setup里面使用的defineProps宏相关的代码不在了，并且多了一个props属性。没错这个props属性就是我们的defineProps宏生成的。
我们再来看一个不在setup顶层调用defineProps的例子：
<script setup lang="ts">
import {ref} from "vue"
const title = ref("title")
if (title.value) {
const props = defineProps({
content: String,
});
}
</script>
运行这个例子会报错：defineProps is not defined
我们来看看编译后的js代码：
import { defineComponent as _defineComponent } from "vue";
import { ref } from "vue";
const __sfc__ = _defineComponent({
setup(__props) {
const title = ref("title");
if (title.value) {
const props = defineProps({
content: String,
});
}
const __returned__ = { title };
return __returned__;
},
});
明显可以看到由于我们没有在setup的顶层调用defineProps宏，在编译时就不会将defineProps宏替换为定义props相关的代码，而是原封不动的输出回来。在运行时执行到这行代码后，由于我们没有任何地方定义了defineProps函数，所以就会报错defineProps is not defined。
六、总结
vue中的宏到底是什么？
vue3的宏是一种特殊的代码，在编译时会将这些特殊的代码转换为浏览器能够直接运行的指定代码，根据宏的功能不同，转换后的代码也不同。
- 为什么这些宏不需要手动从
vue中import？
因为在编译时已经将这些宏替换为指定的浏览器能够直接运行的代码，在运行时已经不存在这些宏相关的代码，自然不需要从vue中import。
- 为什么只能在
setup顶层中使用这些宏？
因为在编译时只会去处理setup顶层的宏，其他地方的宏会原封不动的输出回来。在运行时由于我们没有在任何地方定义这些宏，当代码执行到宏的时候当然就会报错。
如果想要在vue中使用更多的宏，可以使用 vue macros。这个库是用于在vue中探索更多的宏和语法糖，作者是vue的团队成员 三咲智子 。
