浅谈Vue3|浅谈Vue3 defineComponent有什么作用浅谈Vue3defineComponent有什么作用

defineComponent重载函数
开发实践

defineComponent函数，只是对setup函数进行封装，返回options的对象；

export function defineComponent(options: unknown) {return isFunction(options) ? { setup: options } : options}

defineComponent最重要的是：在TypeScript下，给予了组件正确的参数类型推断。

文章图片

defineComponent重载函数 1：direct setup function

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

文章图片

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 supportexport function defineComponent(options: ComponentOptionsWithoutProps): DefineComponent

文章图片

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 supportexport function defineComponent(options: ComponentOptionsWithArrayProps): DefineComponent,RawBindings,...>

文章图片

4: object format with object props declaration

// overload 4: object format with object props declaration// see `ExtractPropTypes` in ./componentProps.tsexport function defineComponent,RawBindings,D,C extends ComputedOptions = {},M extends MethodOptions = {},Mixin extends ComponentOptionsMixin = ComponentOptionsMixin,Extends extends ComponentOptionsMixin = ComponentOptionsMixin,E extends EmitsOptions = Record,EE extends string = string>(options: ComponentOptionsWithObjectProps): DefineComponent

文章图片

开发实践除去单元测试中几种基本的用法，在以下的 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) => () }} 写法
defineComponent 并不适用于函数式组件，应使用 RenderContext 解决

【浅谈Vue3|浅谈Vue3 defineComponent有什么作用】到此这篇关于浅谈Vue3 defineComponent有什么作用的文章就介绍到这了,更多相关Vue3 defineComponent作用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！