在Vue 3中,ref
、reactive
、computed
、defineProps
和defineEmits
是常用的Composition API函数。它们的类型注解如下所示:
ref
:ref
函数用于创建一个响应式的数据对象,它接受一个初始值,并返回一个具有value
属性的Ref
对象
function ref<T>(value: T): Ref<T>
示例用法:
import { ref, Ref } from 'vue'
const count: Ref<number> = ref(0)
reactive
:reactive
函数用于创建一个具有响应式数据的普通对象,它接受一个普通的JavaScript对象,并返回一个响应式的代理对象。
function reactive<T extends object>(target: T): UnwrapNestedRefs<T>
示例用法:
import { reactive, UnwrapNestedRefs } from 'vue'
const state: UnwrapNestedRefs<{ count: number }> = reactive({
count: 0
})
computed
:computed
函数用于创建一个计算属性,它可以基于响应式数据进行计算,并且具有缓存机制。
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
}
})
defineProps
:defineProps
函数用于定义组件的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
defineEmits
:defineEmits
函数用于定义组件的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 类型