Vue3中defineEmits、defineProps 是怎么做到不用引入就能直接用的
最近正在将一个使用单文件组件的 Options API 的 Vue2 JavaScript 项目升级为 Vue3 typescript,并利用 Composition API 的优势。
比如,下面这种 选项API 方式:
export default {
props: {
name: {
type: String,
required: true.
}
},
emits: ['someEvent', 'increaseBy']
};
我们将它转成 组合API 方式:
const props = defineProps<{
name: string;
}>();
const emit = defineEmits<{
(event: 'someEvent): void;
(event: 'increaseBy', value: number): void;
}>();
从 选项API 的 emit
和 props
到 组合API 的 defineemit
和 defineProps
函数的基于类型语法的转换并不简单。我也很好奇 Vue 是如何处理接口的。
TypeScript 接口是只在设计和编译时存在的结构。它们在JavaScript运行时之前被过滤掉,那么它们是如何影响组件的行为的呢?
我想知道是否有办法看到Vue如何解释传递给 defineEmits
和 defineProps
的通用参数。如果你注意到文档中说你不需要导入 defineEmits
和 defineProps
函数。这是因为它们实际上是同名的JavaScript函数的宏。在进行完整的 TypeScript 传递之前,Vue webpack插件使用TypeScript的 AST(抽象语法树)来推导JavaScript版本的函数选项。
如果不是因为宏:
defineProps<{
prop1: string;
prop2: number;
}>();
就会变成:
defineProps();
这样就会导致参数缺失的错误。
如果看一下Vue的 SFC(单文件组件)编译器源代码,有一个叫做 compileScript 的函数。我开始尝试用最少的参数来调用这个函数,这样就不会出错,并模拟任何不重要的必要参数。最终发现了另一个叫 parse 的函数。这给了我所需的大部分参数,只剩下要mock的组件 id
。
这里有一个小脚本,它接收SFC的 .vue
文件并输出 Vue 如何解释 TypeScript。
import { readFile, writeFile } from "fs";
import parseArgs from "minimist";
import { parse, compileScript } from "@vue/compiler-sfc";
const { file, out } = parseArgs(process.argv.slice(2), {
string: ["file", "out"],
alias: {
file: "f",
out: "o"
}
});
const filename = file;
const mockId = "xxxxxxxx";
readFile(filename, "utf8", (err, data) => {
const { descriptor } = parse(data, {
filename
});
const { content } = compileScript(descriptor, {
inlineTemplate: true,
templateOptions: {
filename
},
id: mockId
});
if (out) {
writeFile(out, "utf8", content);
} else {
process.stdout.write(content);
}
});
事例地址:https://stackblitz.com/edit/node-fzuykn?file=index.js
例如,有如以下组件:
interface Bar {
prop1: string;
prop2: number;
} defineProps<{
bar: Bar;
bars: Bar[];
asdf1?: boolean;
asdf2: string[];
}>();
输出:
interface Bar {
prop1: string;
prop2: number;
} export default /*#__PURE__*/_defineComponent({
__name: 'demo',
props: {
bar: { type: Object, required: true },
bars: { type: Array, required: true },
asdf1: { type: Boolean, required: false },
asdf2: { type: Array, required: true }
},
setup(__props: any) {
return (_ctx: any,_cache: any) => {
return (_openBlock(), _createElementBlock("div"))
}
}
Vue3中defineEmits、defineProps 是怎么做到不用引入就能直接用的的更多相关文章
- Dynamics CRM 365 不用按钮工具,直接用js脚本控制按钮的显示隐藏
Dynamics CRM 365 不用按钮工具,直接用js脚本控制按钮的显示隐藏: try { // 转备案按钮 let transferSpecialRequestButton = parent.p ...
- vue3中的defineProps,watch,computed
在vue3的setup语法糖中,defineProps不需要引入了 <script setup> import { computed } from '@vue/reactivity'; i ...
- 【ask】vmware(NAT)中的linux突然无法访问互联网网址,但是直接用ip可以访问。
前两天虚拟机里的linuxmint不知何故,突然无法访问互联网了.依稀记得是升级了win7下面的360安全卫士之后发生的事情.所以, 第1步就开始去找防火墙的各种设置,结果没有查到结果. 第2步猛然看 ...
- 端午总结Vue3中computed和watch的使用
1使用计算属性 computed 实现按钮是否禁用 我们在有些业务场景的时候,需要将按钮禁用. 这个时候,我们需要使用(disabled)属性来实现. disabled的值是true表示禁用.fals ...
- Module Federation 模块联邦 在Vue3中使用Vue2搭建的微服务
前言: 备注:本文基于对webpack Module Federation有一定了解的情况下 一般情况下使用模块联邦都是会使用相同的版本,如Vue2的组件时在Vue2中使用,但我为什么会在Vue3项目 ...
- vue3中pinia的使用总结
pinia的简介和优势: Pinia是Vue生态里Vuex的代替者,一个全新Vue的状态管理库.在Vue3成为正式版以后,尤雨溪强势推荐的项目就是Pinia.那先来看看Pinia比Vuex好的地方,也 ...
- pig的grunt中shell命令不稳定,能不用尽量不用
shell命令:mv a b 将文件a改名为b, 可如果b已经存在,比如/test文件下有a和b两个文件,执行mv a b后,b被覆盖的了.也就是/test文件下只有a. 但是mv命令在pig的g ...
- 在Javascript中 声明时用"var"与不用"var"的区别,== 和 ===的区别
今天,被问到两个JS问题,当时没回答到重点,问题虽然看起来简单,但是细节却马虎不得,在此做下记录: 1. 在Javascript中 声明时用"var"与不用"var&qu ...
- vue3中使用axios如何去请求数据
在vue2中一般放在created中,但是在vue3中取消了created生命周期,请求方式有两种 直接在setup中去获取数据 setup(props) { const data = reactiv ...
随机推荐
- 第2章 C++编程入门
C++中的数据分为常量和变量. 2.1常量(Constants) 顾名思义,常量的值在程序中不能改变 Type of constant(常量数据类型) | integer:整型 | floating- ...
- Web思维导图实现的技术点分析(附完整源码)
简介 思维导图是一种常见的表达发散性思维的有效工具,市面上有非常多的工具可以用来画思维导图,有免费的也有收费的,此外也有一些可以用来帮助快速实现的JavaScript类库,如:jsMind.KityM ...
- Python实现简繁体转换,真的玩得花
大家好鸭, 我是小熊猫 直接开搞!!! 1.opencc-python 首先介绍opencc中的Python实现库,它具有安装简单,翻译准确,使用方便等优点.对于我们日常的需求完全能够胜任. 1.1安 ...
- idea中enter键不能换行
idea中enter键不能换行 按enter键只能往下移动 如下图 解决办法: 方式一:按住window + Insert 方式二: 按住Fn + Insert 两种方式总有一种可以 之后就可以按en ...
- 学习C4C的视频分享
- Effective Java 3 读后感
Effective Java 3 读后感 最近学习了一下Effectvie Java,这是一本非常适合有一定经验的Java后端人员阅读的书.书中总结许多编码经验对开发很有帮助,比如其中总结的对于流和L ...
- 前 K 个高频元素问题
前 K 个高频元素问题 作者:Grey 原文地址: 前 K 个高频元素问题 题目描述 LeetCode 347. Top K Frequent Elements 思路 第一步,针对数组元素封装一个数据 ...
- war包解压与压缩
解压:jar -xvf ROOT.war 压缩:jar -cvfM0 ROOT.war ./
- Code Runner for VS Code,下载量突破 4000 万!支持超过50种语言
大家好! 我是韩老师.还记得 6 年前的夏天,我在巨硬写着世界上最好的语言,有时也需要带着游标卡尺写着另一门语言.然而,我对这两门语言都不熟悉,如果能在 VS Code 中方便快捷地运行各种语言,那岂 ...
- Solution -「CF520E」Pluses everywhere
Step 1. 转化一步题目:考虑有 \(n\) 个小球,每个小球有 \(a_i\) 的价值,\(m\) 个板子,把板子插进小球间的空隙,且不能插在第 \(1\) 个球之前与第 \(n\) 个球之后. ...