Vue3 - defineComponent解决了什么？

我会带着你远行 2022-12-19 00:52 24阅读 0赞

> defineComponent函数，只是对setup函数进行封装，返回options的对象；
> 
>     export function defineComponent(options: unknown) {
>       return isFunction(options) ? { setup: options } : options
>     }
> 
> defineComponent最重要的是：在TypeScript下，给予了组件 **正确的参数类型推断 。**

**index.tsx**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MTU3MDg1_size_16_color_FFFFFF_t_70][]

# defineComponent重载函数 #

### 1：direct setup function ###

// overload 1: direct setup function
    // (uses user defined props interface)
    export function defineComponent<Props, RawBindings = object>(
      setup: (
        props: Readonly<Props>,
        ctx: SetupContext
      ) => RawBindings | RenderFunction
    ): DefineComponent<Props, RawBindings>

### ![20201104220622806.png][] ###

### 2：object format with no props ###

// overload 2: object format with no props
    // (uses user defined props interface)
    // return type is for Vetur and TSX support
    export function defineComponent<
      Props = {},
      RawBindings = {},
      D = {},
      C extends ComputedOptions = {},
      M extends MethodOptions = {},
      Mixin extends ComponentOptionsMixin = ComponentOptionsMixin,
      Extends extends ComponentOptionsMixin = ComponentOptionsMixin,
      E extends EmitsOptions = EmitsOptions,
      EE extends string = string
    >(
      options: ComponentOptionsWithoutProps<Props,RawBindings,D,C,M,Mixin,Extends,E,EE>
    ): DefineComponent<Props, RawBindings, D, C, M, Mixin, Extends, E, EE>

### ![2020110422065856.png][] ###

### 3：object format with array props declaration ###

// overload 3: object format with array props declaration
    // props inferred as { [key in PropNames]?: any }
    // return type is for Vetur and TSX support
    export function defineComponent<
      PropNames extends string,
      RawBindings,
      D,
      C extends ComputedOptions = {},
      M extends MethodOptions = {},
      Mixin extends ComponentOptionsMixin = ComponentOptionsMixin,
      Extends extends ComponentOptionsMixin = ComponentOptionsMixin,
      E extends EmitsOptions = Record<string, any>,
      EE extends string = string
    >(
      options: ComponentOptionsWithArrayProps<
        PropNames,
        RawBindings,...>
    ): DefineComponent<
      Readonly<{ [key in PropNames]?: any }>,
      RawBindings,...>

### ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MTU3MDg1_size_16_color_FFFFFF_t_70 1][] ###

### 4: object format with object props declaration ###

// overload 4: object format with object props declaration
    // see `ExtractPropTypes` in ./componentProps.ts
    export function defineComponent<
      // the Readonly constraint allows TS to treat the type of { required: true }
      // as constant instead of boolean.
      PropsOptions extends Readonly<ComponentPropsOptions>,
      RawBindings,
      D,
      C extends ComputedOptions = {},
      M extends MethodOptions = {},
      Mixin extends ComponentOptionsMixin = ComponentOptionsMixin,
      Extends extends ComponentOptionsMixin = ComponentOptionsMixin,
      E extends EmitsOptions = Record<string, any>,
      EE extends string = string
    >(
      options: ComponentOptionsWithObjectProps<
        PropsOptions, RawBindings, D, C, M, Mixin, Extends, E, EE>
    ): DefineComponent<PropsOptions, RawBindings, D, C, M, Mixin, Extends, E, EE>

# ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MTU3MDg1_size_16_color_FFFFFF_t_70 2][] #

# 开发实践 #

除去单元测试中几种基本的用法，在以下的 ParentDialog 组件中，主要有这几个实际开发中要注意的点：

*  自定义组件和全局组件的写法
 *  inject、ref 等的类型约束
 *  setup 的写法和相应 h 的注入问题
 *  tsx 中 v-model 和 scopedSlots 的写法

### ParentDialog.vue ###

# 全文总结 #

*  引入 defineComponent() 以正确推断 setup() 组件的参数类型
 *  defineComponent 可以正确适配无 props、数组 props 等形式
 *  defineComponent 可以接受显式的自定义 props 接口或从属性验证对象中自动推断
 *  在 tsx 中，element-ui 等全局注册的组件依然要用 kebab-case 形式
 *  在 tsx 中，v-model 要用 `model={ { value, callback }}` 写法
 *  在 tsx 中，scoped slots 要用 `scopedSlots={ { foo: (scope) => (<Bar/>) }}` 写法
 *  defineComponent 并不适用于函数式组件，应使用 `RenderContext<interface>` 解决

**                                                                                                  --End--**

--------------------

[原文地址][Link 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MTU3MDg1_size_16_color_FFFFFF_t_70]: /images/20221120/89bb8f0f3793415789f28dc1ee658ed1.png
[20201104220622806.png]: /images/20221120/1d29767522094c5ab68a8cc149df4aef.png
[2020110422065856.png]: /images/20221120/be5fc7c7d8114a2cb72e83cd374110f6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MTU3MDg1_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20201104220730282.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MTU3MDg1,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MTU3MDg1_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20201104220811269.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MTU3MDg1,size_16,color_FFFFFF,t_70
[Link 1]: https://blog.csdn.net/tonylua/article/details/109213452