ref reactive computed define props define emits 的类型注解

在Vue 3中,refreactivecomputeddefinePropsdefineEmits是常用的Composition API函数。它们的类型注解如下所示:

  • refref 函数用于创建一个响应式的数据对象,它接受一个初始值,并返回一个具有value属性的Ref对象
function ref<T>(value: T): Ref<T>

示例用法:

import { ref, Ref } from 'vue'

const count: Ref<number> = ref(0)
  • reactivereactive 函数用于创建一个具有响应式数据的普通对象,它接受一个普通的JavaScript对象,并返回一个响应式的代理对象。
function reactive<T extends object>(target: T): UnwrapNestedRefs<T>

示例用法:

import { reactive, UnwrapNestedRefs } from 'vue'

const state: UnwrapNestedRefs<{ count: number }> = reactive({
  count: 0
})
  • computedcomputed 函数用于创建一个计算属性,它可以基于响应式数据进行计算,并且具有缓存机制。
function computed<T>(getter: ComputedGetter<T>): ComputedRef<T>
function computed<T>(options: WritableComputedOptions<T>): WritableComputedRef<T>

示例用法:

import { computed, ComputedRef, WritableComputedRef, WritableComputedOptions, ComputedGetter } from 'vue'

const double: ComputedRef<number> = computed(() => state.count * 2)

const total: WritableComputedRef<number> = computed({
  get: () => state.count,
  set: (value: number) => {
    state.count = value
  }
})
  • definePropsdefineProps 函数用于定义组件的props,并返回一个代理对象。它的类型注解取决于组件的Props类型。
function defineProps<PropNames extends string[]>(props: PropNames): { [K in PropNames[number]]: any }

示例用法:

import { defineProps } from 'vue'

interface Props {
  message: string
  count: number
}

const props = defineProps<Props>()

console.log(props.message) // 类型推断为 string
console.log(props.count) // 类型推断为 number
  • defineEmitsdefineEmits 函数用于定义组件的emits,并返回事件触发函数的代理对象。它的类型注解取决于组件的EmitsOptions类型。
function defineEmits<Options extends EmitsOptions>(options: Options): DefineEmits

示例用法:

import { defineEmits } from 'vue'

const emits = defineEmits({
  click: (message: string) => {
    return typeof message === 'string'
  },
  update: (value: number) => {
    return typeof value === 'number'
  }
})

emits.click('Hello') // 类型检查通过
emits.update('10') // 类型检查不通过,因为参数应该是 number 类型
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值