前言

vue3开始vue引入了宏,比如definePropsdefineEmits等。我们每天写vue代码时都会使用到这些宏,但是你有没有思考过vue中的宏到底是什么?为什么这些宏不需要手动从vueimport?为什么只能在setup顶层中使用这些宏?

vue 文件如何渲染到浏览器上

要回答上面的问题,我们先来了解一下从一个vue文件到渲染到浏览器这一过程经历了什么?

我们的vue代码一般都是写在后缀名为vue的文件上,显然浏览器是不认识vue文件的,浏览器只认识html、css、jss等文件。所以第一步就是通过webpack或者vite将一个vue文件编译为一个包含render函数的js文件。然后执行render函数生成虚拟DOM,再调用浏览器的DOM API根据虚拟DOM生成真实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,属性名为contentprops,并且在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 = renderrender函数赋值到组件对象的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的宏是一种特殊的代码,在编译时会将这些特殊的代码转换为浏览器能够直接运行的指定代码,根据宏的功能不同,转换后的代码也不同。

  • 为什么这些宏不需要手动从vueimport

    因为在编译时已经将这些宏替换为指定的浏览器能够直接运行的代码,在运行时已经不存在这些宏相关的代码,自然不需要从vueimport

  • 为什么只能在setup顶层中使用这些宏?

    因为在编译时只会去处理setup顶层的宏,其他地方的宏会原封不动的输出回来。在运行时由于我们没有在任何地方定义这些宏,当代码执行到宏的时候当然就会报错。

如果想要在vue中使用更多的宏,可以使用 vue macros。这个库是用于在vue中探索更多的宏和语法糖,作者是vue的团队成员 三咲智子

如果我的文章对你有点帮助,欢迎关注公众号:【欧阳码农】,文章在公众号首发。你的支持就是我创作的最大动力,感谢感谢!

vue3的宏到底是什么东西?的更多相关文章

  1. CPU到底是什么东西?它为什么能够执行数学运算?

    CPU到底是什么东西?它为什么能够执行数学运算? 本文地址http://yangjianyong.cn/?p=20转载无需经过作者本人授权 简单的物理电路 先来看一张初中学过的物理电路图: 从图中我们 ...

  2. 关于RundownProtect到底是什么东西

    RundownProtect这个字段相信只要是读过WRK源码的都会看过这个东西,这个字段在进程和线程的结构中都存在.最典型的例子就是对进程要进行什么操作的时候会先引用这个字段进行加保护,等操作结束后再 ...

  3. JS事件处理函数中return false到底是什么东西

    在<JS DOM编程艺术>一书中,用return false来阻止事件默认行为,可是js高程3里没有这种用法,那这到底是什么呢. 先看一下知乎的一个解释 就此问题,首先要纠正两个观点: 1 ...

  4. ESB企业服务总线到底是什么东西呢?

    顾名思义,企业服务总线(ESB)就是一条企业架构的总线,所有的企业服务都挂接到该总线上对外公布,企业服务总线负责管理服务目录,解析服务请求者的请求方法.消息格式,并对服务提供者进行寻址,转发服务请求. ...

  5. vue3和vue2 的区别,vue3和vu2到底哪个好呢?

    vue3 正式发布有两年多了,之前也做过一些学习和研究.vue3 发布后给某培训机构开发了一套vue3课程课件,自己也开源了一套基于vue3的后台管理系统(因为个人懒的原因,半年后才上传到gitHub ...

  6. php单元测试到底是什么东西呢?

    前言: 真正写php代码也有3年时间了,勉强算是一个php程序员, 但是,心底却一直没有底气. 都说测试驱动开发,可我连程序开发中什么是单元测试?这种基本的程序员的素养都 还不是很清楚,痛定思痛,决定 ...

  7. Linux 内核常见宏定义

    我们在阅读Linux内核是,常见到这些宏 __init, __initdata, __initfunc(), asmlinkage, ENTRY(), FASTCALL()等等.它们定义在 /incl ...

  8. 嵌入式C语言自我修养 04:Linux 内核第一宏:container_of

    4.1 typeof 关键字 ANSI C 定义了 sizeof 关键字,用来获取一个变量或数据类型在内存中所占的存储字节数.GNU C 扩展了一个关键字 typeof,用来获取一个变量或表达式的类型 ...

  9. extern,头文件和ifndif宏

    转自:CSDN->fpmystar 用#include可以包含其他头文件中变量.函数的声明,为什么还要extern关键字,如果我想引用一个全局变量或函数f(),我只要直接在源文件中包含#incl ...

  10. WmS详解(一)之token到底是什么?基于Android7.0源码

    做Android有些年头了,Framework层三大核心View系统,WmS.AmS最近在研究中,这三大块,每一块都够写一个小册子来介绍,其中View系统的介绍,我之前有一个系列的博客(不过由于时间原 ...

随机推荐

  1. DC逻辑综合工具简介-Design Compiler

    逻辑综合简介 逻辑综合:代码转变为网表 FPGA:代码转变为FPGA内部的数字单元 在进行综合的时候往往会使用一些脚本工具 需要学会看综合之后的报告 1.目标 进行综合需要读入RTL设计,还需要用到f ...

  2. 痞子衡嵌入式:我拿到了2023年度电子星球(eestar)年度黑马作者

    今天收到了「电源网旗下电子星球」 颁发的 2023 年度黑马作者奖牌,这是痞子衡继 2019 年和与非网合作后的第二个媒体平台颁发的奖项.这个奖牌做得很有质感,拿在手里沉甸甸的.此外与奖牌配套的还有一 ...

  3. 使用 golang 开发 PHP 扩展

    使用 golang 开发 PHP 扩展 环境 golang go1.19.9 darwin/arm64 Macos/Linux PHP8.1.11 编译安装 实战 PHP脚手架生成 进入PHP源码,使 ...

  4. [转帖]shell编程:变量的数值计算实践(五)

    https://www.cnblogs.com/luoahong/articles/9224495.html 算术运算符 变量的数值(整数)计算   1)(())用法:(此方法很常用)** 范例:sh ...

  5. Harbor镜像仓库的导出与整理之二

    Harbor镜像仓库的导出与整理之二 背景 前几天参照大神的blog进行了一下harbor的镜像列表的获取与下载. 当时发现一个很诡异的问题. 实际上镜像仓库里面的镜像很多. 但是导出和列表里面的却很 ...

  6. [转帖]Jmeter中如何读取MYSQL数据作为请求参数

    在项目测试过程中,我经常需要将数据库中的数据作为参数传递到请求中.Jmeter中MYSQL数据库连接操作过程如下: 1.下载/n导入mysql的jdbc驱动包 下载mysql驱动包地址: http:/ ...

  7. [转帖]手把手教你在QEMU上运行RISC-V Linux

    https://kernel.0voice.com/forum.php?mod=viewthread&tid=3080   嵌入式Linux内核 发布于 2023-3-15 14:44:37  ...

  8. [转帖]“高密度核心”的角逐 —— AMD Bergamo SoC & Zen 4c 前瞻

    https://zhuanlan.zhihu.com/p/585469720 最近这段时间一直在关注Bergamo和Zen 4c,但遗憾的是Genoa的发布会并没有提到太多的Bergamo细节.不过这 ...

  9. java -D的一些学习和使用

    背景 java开发的程序有很多进行配置的方式 可以通过 yaml文件或者是xml文件 也可以通过环境变量的方式. 1. 容器的话可以使用 -e 或者是env进行注入 2. K8S的话可以通过 conf ...

  10. Redis7.0.7的简单安装与学习

    Redis7.0.7的简单安装与学习 摘要 2022.12.18 世界杯决赛 另外是我感染奥密克戎第五天. 高烧已经没了,但是嗓子巨疼. 睡不着觉,肝胆学习一下最新的Redis7.0.7 第一部分安装 ...