关于javascript:Vue3中defineEmitsdefineProps-是怎么做到不用引入就能直接用的

26次阅读

共计 2463 个字符，预计需要花费 7 分钟才能阅读完成。

本文首发于微信公众号：大迁世界, 我的微信：qq449245884，我会第一工夫和你分享前端行业趋势，学习路径等等。
更多开源作品请看 GitHub https://github.com/qq449245884/xiaozhi，蕴含一线大厂面试残缺考点、材料以及我的系列文章。

最近正在将一个应用单文件组件的 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"))
    }
}

正如下面所看到的，SFC 编译器采纳 TypeScript 类型信息，并建设了 props 对象。原始类型是一对一的。接口变成对象，而 ? 可选语法驱动 required 的属性。

代码部署后可能存在的 BUG 没法实时晓得，预先为了解决这些 BUG，花了大量的工夫进行 log 调试，这边顺便给大家举荐一个好用的 BUG 监控工具 Fundebug。

作者：romaopedro 译者：前端小智起源：logrocket
https://unicorn-utterances.com/posts/vue-composition-inspector