vue3.x之defineComponent

1、defineComponent 是什么？

defineComponent 本身的功能很简单，但是最主要的功能是为了 ts 下的类型推到。对于一个 ts 文件，如果我们直接写

export default {}

这个时候，对于编辑器而言，{} 只是一个 Object 的类型，无法有针对性的提示我们对于 vue 组件来说 {} 里应该有哪些属性。但是增加一层 defineComponet 的话，

export default defineComponent({})

这时，{} 就变成了 defineComponent 的参数，那么对参数类型的提示，就可以实现对 {} 中属性的提示，另外还可以进行对参数的一些类型推导等操作。

2、defineComponent 作用？

1. 显示 Vue Options 提示。

这个API一般是在ts或者tsx文件中使用的，所以，当我们创建了一个这种类型的文件后，它是不知道我们是要去写 vue 实例代码的，所以在这种情况下，我们需要defineComponent来帮我们做内部的一些options的提示，我们可以看一个使用了defineComponent和没有使用defineComponent的例子：

⏰ 未使用defineComponent

⏰ 使用了defineComponent

^{👀 当然这背后的原理是利用 TypeScript 定义了defineComponent 参数类型实现的。}

2. 给予正确的参数类型推断。

拿 setup 来说，defineComponent 可以为 setup 函数的 props 传参做出正确的类型推断，看下图：

如果没有使用 defineComponent 的话，是没有办法推断出来的，需要自己显式地去定义类型。

3. 可返回一个合成类型的构造函数。

这也是官方文档中所说的，我在代码中尝试了一下，发现确实可以在其返回的构造函数中去定义一些钩子和属性等，如下图：