imtoken钱包官网下载 to|definecomponent

作者： imtoken钱包官网下载 to

2024-03-09 21:40:50

vue3中defineComponent 的作用详解 - 掘金

首页首页

沸点

课程

直播

活动

竞赛

商城

APP

插件搜索历史

清空

创作者中心

写文章发沸点写笔记写代码草稿箱创作灵感

会员

vue3中defineComponent 的作用详解

前端_小姜

2023-02-10

7,983

这篇文章主要介绍了vue3中defineComponent 的作用,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

vue3中，新增了 defineComponent ，它并没有实现任何的逻辑，只是把接收的 Object 直接返回，它的存在是完全让传入的整个对象获得对应的类型，它的存在就是完全为了服务 TypeScript 而存在的。

我都知道普通的组件就是一个普通的对象，既然是一个普通的对象，那自然就不会获得自动的提示，

import { defineComponent } from 'vue'

const component = {

props:{

data: String,

setup // 没有该有的提示，这非常的不友好

}

export default component

但是当我们加上 defineComponent（）之后，就完全不一样了，可以获得自动提示，vue2、vue3的自动提示都有

import { defineComponent } from 'vue'

const component = {

props:{

data: String,

setup（）{

// setup 可接受两个参数，一个props，和 context

}

export default component

接下来看看 setup 中的两个参数 props 与 context ,

props指组件传递来的参数，并且ts可以推论出props的类型.props也就是 vue2 中组件中的 props

context 有三个属性 attrs slots emit 分别对应vue2中的attrs属性、slots插槽、$emit发送事件

import { defineComponent } from 'vue'

const component = {

props:{

data: String,

setup（props, context）{

// props.data

// context.attrs context.slots context.emit

}

export default component

扩展知识：

vue3之组件结构(defineComponent,setup函数)

在vue3中,对组件整体结构做一些调整,先看一个组件案例:

import {ref, reactive, defineComponent, Ref, onMounted} from "vue";

import {settingsStore} from "/@/store/module/settings";

import {IRoleList} from "/@/interface/role/list.interface";

import {IHttpResult} from "/@/interface/common.interface";

import { ILogListParams } from "/@/interface/settings/log.interface";

export default defineComponent({

setup() {

const logList: Ref = ref([]);

const columns = [

...

];

const pagination = ref({

"show-quick-jumper": true,

total: 100,

current: 1,

"show-size-changer": true,

"show-total": (total: number, range: number[]) => `${range[0]}-${range[1]} 共 ${total} 条`,

"pageSize": 10

});

const columnsList = ref(columns);

const params: ILogListParams = reactive({

page: 1,

pageSize: 10

});

onMounted(() => {

findLogList();

});

/*查询日志列表*/

const findLogList = () => {

settingsStore.findLogList(params).then((res: IHttpResult) => {

const data = res.data;

pagination.value.total = data.total;

logList.value = data.list;

});

};

/*修改状态*/

const onChange = (pagination: {current: number, pageSize: number}) => {

params.page = pagination.current;

params.pageSize = pagination.pageSize;

};

/*删除*/

const onDelete = (id: number) => {

alert(id);

};

return {

columnsList,

logList,

onDelete,

onChange,

pagination

};

}

});

从上面组件代码中,可以看出在vue3中没有this对象, 所有的逻辑代码都写在setup方法里面.

若是要在HTML模板页面中使用变量或者方法, 需要在setup方法return出去.

setup是Vue3 的一大特性函数, 它有几个特性:

1、setup函数是处于生命周期函数 beforeCreate 和 Created 两个钩子函数之间的函数

2、setup函数是 Composition API（组合API）的入口

3、在setup函数中定义的变量和方法最后都是需要 return 出去的不然无法再模板中使用

setup函数的注意点：

vue3虽然支持vue2.x版本的写法,但也有一些要注意的地方

1、由于在执行 setup函数的时候，还没有执行 Created 生命周期方法，所以在 setup 函数中，无法使用 data 和 methods 的变量和方法

2、由于我们不能在 setup函数中使用 data 和 methods，所以 Vue 为了避免我们错误的使用，直接将 setup函数中的this修改成了 undefined

3、setup函数只能是同步的不能是异步的

上面的组件中用defineComponent包裹了组件;

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

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

defineComponent可以给组件的setup方法准确的参数类型定义.

defineComponent 可以接受显式的自定义 props 接口或从属性验证对象中自动推断

defineComponent 可以正确适配无 props、数组 props 等形式

引入 defineComponent() 以正确推断 setup() 组件的参数类型

延申：

文档中第一句话很容易看懂，说白了就是从实现上看，用了或者跟不用这个api没多大区别但是呢，第二句话说的好像又有一些区别，不过我没太看懂。。。于是我自己的第一个问题就来了：

问题一：defineComponent 这个API用起来到底和不用有什么区别？？？

1. 显示 Vue Options 提示。

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

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

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

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

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

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

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

这就是目前我对这个API的一些理解吧~后续有新发现再补充

到此这篇关于vue3中defineComponent 的作用的文章就介绍到这了,

更新补充：

前端_小姜

前端小菜鸡

文章

31k

阅读

粉丝目录收起

延申：

问题一：defineComponent 这个API用起来到底和不用有什么区别？？？

1. 显示 Vue Options 提示。

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

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

defineComponent | Vue3

Github

阅前必读开篇词 | 为什么要学习源码前置知识 ProxySet、Map、WeakSet、WeakMapCompositionTypeScriptSpec语法全局概览目录结构createAppdefineComponenthnextTickExample 基本范例响应式系统整体概览reactivereactive.specrefref.specbaseHandlerseffecteffect.speccomputedcomputed.spec编绎模块 compilerparse.speccompile.specRuntime runtime # defineComponent 实现方式的 defineComponent 只是返回传递给它的对象。但是，在类型方面，返回的值具有一个合成类型的构造函数，用于手动渲染函数、 TSX 和 IDE 工具支持 # 从一个例子开始 import { defineComponent } from 'vue'

const MyComponent = defineComponent({

data() {

return { count: 1 }

methods: {

increment() {

this.count++

}

})

console.log(`MyComponent:${MyComponent}`)

1234567891011121314亲自试一试

←

createApp

→

MIT Licensed | Copyright @ 2020-2021 Vue3js.cn 京ICP备15001338号-6

Vue 中的 defineComponent - 掘金

首页首页

沸点

课程

直播

活动

竞赛

商城

APP

插件搜索历史

清空

创作者中心

写文章发沸点写笔记写代码草稿箱创作灵感

会员

Vue 中的 defineComponent

滴滴前端技术团队

2021-08-10

27,519

关注

@滴滴出行

作者：崔静

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

export default {}

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

export default defineComponent({})

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

但是上面的例子，如果你在 vscode 的用 .vue 文件中尝试的话，会发现不写 defineComponent 也一样有提示。这个其实是 Vetur 插件进行了处理。

下面看 defineComponent 的实现，有4个重载，先看最简单的第一个，这里先不关心 DefineComponent 是什么，后面细看。

// overload 1: direct setup function

// (uses user defined props interface)

export function defineComponent(

setup: (

props: Readonly,

ctx: SetupContext

) => RawBindings | RenderFunction

): DefineComponent

defineComponet 参数为 function， function 有两个参数 props 和 ctx，返回值类型为 RawBindings 或者 RenderFunction。defineComponet 的返回值类型为 DefineComponent。这其中有两个泛型 Props 和 RawBindings。Props 会根据我们实际写的时候给 setup 第一个参数传入的类型而确定，RawBindings 则根据我们 setup 返回值来确定。一大段话比较绕，写一个类似的简单的例子来看:

类似 props 用法的简易 demo 如下，我们给 a 传入不同类型的参数，define 返回值的类型也不同。这种叫 Generic Functions

declare function define(a: Props): Props

const arg1:string = '123'

const result1 = define(arg1) // result1：string

const arg2:number = 1

const result2 = define(arg2) // result2: number

类似 RawBindings 的简易 demo如下： setup 返回值类型不同，define 返回值的类型也不同

declare function define(setup: ()=>T): T

const arg1:string = '123'

const resul1 = define(() => {

return arg1

})

const arg2:number = 1

const result2 = define(() => {

return arg2

})

由上面两个简易的 demo，可以理解重载1的意思，defineComponet 返回类型为DefineComponent，其中 Props 为 setup 第一个参数类型；RawBindings 为 setup 返回值类型，如果我们返回值为函数的时候，取默认值 object。从中可以掌握一个 ts 推导的基本用法，对于下面的定义

declare function define(a: T): T

可以根据运行时传入的参数，来动态决定 T 的类型这种方式也是运行时类型和 typescript 静态类型的唯一联系，很多我们想通过运行时传入参数类型，来决定其他相关类型的时候，就可以使用这种方式。

接着看 definComponent，它的重载2，3，4分别是为了处理 options 中 props 的不同类型。看最常见的 object 类型的 props 的声明

export function defineComponent<

// the Readonly constraint allows TS to treat the type of { required: true }

// as constant instead of boolean.

PropsOptions extends Readonly,

RawBindings,

C extends ComputedOptions = {},

M extends MethodOptions = {},

Mixin extends ComponentOptionsMixin = ComponentOptionsMixin,

Extends extends ComponentOptionsMixin = ComponentOptionsMixin,

E extends EmitsOptions = Record,

EE extends string = string

options: ComponentOptionsWithObjectProps<

PropsOptions,

RawBindings,

Mixin,

Extends,

): DefineComponent

和上面重载1差不多的思想，核心思想也是根据运行时写的 options 中的内容推导出各种泛型。在 vue3 中 setup 的第一个参数是 props，这个 props 的类型需要和我们在 options 传入的一致。这个就是在ComponentOptionsWithObjectProps中实现的。代码如下

export type ComponentOptionsWithObjectProps<

PropsOptions = ComponentObjectPropsOptions,

RawBindings = {},

D = {},

C extends ComputedOptions = {},

M extends MethodOptions = {},

Mixin extends ComponentOptionsMixin = ComponentOptionsMixin,

Extends extends ComponentOptionsMixin = ComponentOptionsMixin,

E extends EmitsOptions = EmitsOptions,

EE extends string = string,

Props = Readonly>,

Defaults = ExtractDefaultPropTypes

> = ComponentOptionsBase<

Props,

RawBindings,

Mixin,

Extends,

EE,

Defaults

> & {

props: PropsOptions & ThisType

} & ThisType<

CreateComponentPublicInstance<

Props,

RawBindings,

Mixin,

Extends,

Props,

Defaults,

false

export interface ComponentOptionsBase<

Props,

RawBindings,

C extends ComputedOptions,

M extends MethodOptions,

Mixin extends ComponentOptionsMixin,

Extends extends ComponentOptionsMixin,

E extends EmitsOptions,

EE extends string = string,

Defaults = {}

extends LegacyOptions,

ComponentInternalOptions,

ComponentCustomOptions {

setup?: (

this: void,

props: Props,

ctx: SetupContext

) => Promise | RawBindings | RenderFunction | void

//...

}

很长一段，同样的先用一个简化版的 demo 来理解一下：

type TypeA = {

a: T1,

b: T2,

c: T3

}

declare function define(options: TypeA): T1

const result = define({

a: '1',

b: 1,

c: {}

}) // result: string

根据传入的 options 参数 ts 会推断出 T1,T2,T3的类型。得到 T1, T2, T3 之后，可以利用他们进行其他的推断。稍微改动一下上面的 demo，假设 c 是一个函数，里面的参数类型由 a 的类型来决定：

type TypeA = TypeB

type TypeB = {

a: T1

b: T2,

c: (arg:T1)=>{}

}

const result = define({

a: '1',

b: 1,

c: (arg) => { // arg 这里就被会推导为一个 string 的类型

return arg

}

})

然后来看 vue 中的代码，首先 defineComponent 可以推导出 PropsOptions。但是 props 如果是对象类型的话，写法如下

props: {

type: String,

//... 其他的属性

}

而 setup 中的 props 参数，则需要从中提取出 type 这个类型。所以在 ComponentOptionsWithObjectProps 中

export type ComponentOptionsWithObjectProps<

PropsOptions = ComponentObjectPropsOptions,

//...

Props = Readonly>,

//...

通过 ExtracPropTypes 对 PropsOptions 进行转化，然后得到 Props，再传入 ComponentOptionsBase，在这个里面，作为 setup 参数的类型

export interface ComponentOptionsBase<

Props,

//...

extends LegacyOptions,

ComponentInternalOptions,

ComponentCustomOptions {

setup?: (

this: void,

props: Props,

ctx: SetupContext

) => Promise | RawBindings | RenderFunction | void

这样就实现了对 props 的推导。

this 的作用

在 setup 定义中第一个是 this:void 。我们在 setup 函数中写逻辑的时候，会发现如果使用了 this.xxx IDE 中会有错误提示

Property 'xxx' does not exist on type 'void'

这里通过设置 this:void来避免我们在 setup 中使用 this。

this 在 js 中是一个比较特殊的存在，它是根据运行上上下文决定的，所以 typescript 中有时候无法准确的推导出我们代码中使用的 this 是什么类型的，所以 this 就变成了 any，各种类型提示/推导啥的，也都无法使用了(注意：只有开启了 noImplicitThis 配置， ts 才会对 this 的类型进行推导)。为了解决这个问题，typescript 中 function 的可以明确的写一个 this 参数，例如官网的例子：

interface Card {

suit: string;

card: number;

}

interface Deck {

suits: string[];

cards: number[];

createCardPicker(this: Deck): () => Card;

}

let deck: Deck = {

suits: ["hearts", "spades", "clubs", "diamonds"],

cards: Array(52),