vue3 definecomponent,vue3为什么不使用defineproperty
Vue3中的defineEmits和defineProps怎么可以不经过介绍直接使用_码农小宋的技术博客_博客
Yyds干货库存
最近一个使用单文件组件的Options API的Vue2 JavaScript项目正在升级为Vue3 typescript，正在利用Composition API的优势
例如，下面的API方式选项:
导出默认值{
道具:{
名称:{
类型:字符串，
必填:真
}
},
发出:[someEvent ， increaseBy]
};让我们把它变成一个复合API:
const props=defineProps {
名称:字符串；
} ();
const emit=defineEmits {
(event: some event :void；
(event: increaseBy ，value:number):void；
} ();从option API的emit和props到composite API的defineemit和defineProps的基于类型的语法转换并不简单我也很好奇Vue是怎么处理接口的
TypeScript接口是仅存在于设计和编译时的结构它们在JavaScript运行之前就被过滤掉了，那么它们是如何影响组件的行为的呢？
不知道有没有办法看看Vue是怎么解释传递给defineEmits和defineProps的通用参数的？如果您注意到文档中说您不需要导入defineEmits和defineProps函数这是因为它们实际上是同名的JavaScript函数的宏在完整的TypeScript交付之前，Vue webpack插件使用TypeScript的AST(抽象语法树)派生JavaScript版本的函数选项
如果不是因为宏:
定义推广{
prop 1:string；
prop2:数字；
}会变成:
define props()；这会导致参数缺失的错误
如果你看Vue的SFC(单文件组件)编译器源代码，有一个函数叫compileScript我开始尝试用最少的参数调用这个函数，这样就不会出现错误，模拟任何不必要的不重要的参数最后，我找到了另一个名为parse的函数这给了我大部分需要的参数，只有组件id需要模拟
这里有一个接收SFC的小脚本vue文件并输出Vue如何解释TypeScript
从“fs”导入{ readFile，writeFile }；
从“minimist”导入parseArgs
从“@vue/compiler-sfc”导入{ parse，compile script }；
const { file，out }=parse args(process . argv . slice(2)，{
字符串:[file ， out]，
别名:{
文件:“f”，
出局:“o”
}
});
const filename=file
const mockId=xxxxx
XXX’；
readFile(文件名， utf8 ，(错误，数据)={
const { descriptor }=parse(data，{
文件名
});
const { content }=compileScript(描述符，{
inlineTemplate: true，
模板选项：{
文件名
},
id: mockId
});
if (out) {
writeFile(out， utf8 ，content)；
}否则{
process.stdout.write(内容)；
}
});案例地址：https://stackblitz.com/edit/node-fzuykn? file=index . js
例如，有以下组件：
界面栏{
prop 1:string；
prop2:数字；
}
定义方案{
杠：杠；
酒吧：酒吧[]；
asdf1？布尔型；
ASD F2:string[]；
} ();输出：
界面栏{
prop 1:string；
prop2:数字；
}
导出default/* # _ _ PURE _ _ */_ define component({
_ _名称：演示，
道具：{
bar: { type: Object，required: true }，
条形：{ type: Array，required: true }，
asdf1: { type: Boolean，required: false }，
asdf2: { type: Array，required: true }
},
设置(__props: any) {
return (_ctx: any，_cache: any)={
return (_openBlock()，_createElementBlock(div ))
}
}从上面可以看到，SFC编译器获取TypeScript类型信息并构建props对象。原来的类型是一对一。接口变成了一个对象。可选语法驱动必需的属性。
版权归作者所有：原创作品来自博主Codeong小宋，转载请联系作者取得转载授权，否则将追究法律责任。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。