1、ref

ref是我们使用最频繁的hook，其定义基本类型和对象类型为响应式对象。

引入TS，ref 会根据初始化时的值自动推导其类型。

如果需要指定类型，可通过Ref接口指定类型

通过泛型指定类型

VUE3文档中说明的ref的类型：

使用示例：

如果你指定了一个泛型参数但没有给出初始值，那么最后得到的就将是一个包含 undefined 的联合类型：

// 推导得到的类型：Ref<number | undefined> 
const n = ref<number>()

2、reactive

reactive：定义对象类型为响应式对象.

与ref一样，引入TS，reactive 会根据初始化时的值自动推导其类型。

也可以通过接口指定类型

3、computed

计算属性：接受一个 getter 函数，返回一个只读的响应式 ref 对象。

computed会默认推导其返回的ref.value的数据类型

import { ref, computed } from 'vue'

const count = ref(0)

// 推导得到的类型：ComputedRef<number>
const double = computed(() => count.value * 2)

// => TS Error: Property 'split' does not exist on type 'number'
const result = double.value.split('')

也可以通过泛型指定其类型

Vue3文档中说明的computed的类型

使用示例：

const double = computed<number>(() => {
  // 若返回值不是 number 类型则会报错
})

4、watch

侦听一个或多个响应式数据源，并在数据源变化时调用所给的回调函数。通常不需要使用特别的TS

5、defineProps和defineEmits

为了在声明 props 和 emits 选项时获得完整的类型推导支持，我们可以使用 defineProps 和 defineEmits API，它们将自动地在 <script setup> 中可用：

<script setup>
const props = defineProps({
  foo: String
})

const emit = defineEmits(['change', 'delete'])
// setup 代码
</script>

• defineProps 接收与 props 选项相同的值.defineEmits 接收与 emits 选项相同的值
• defineProps 和 defineEmits 在选项传入后，会提供恰当的类型推导。

props 和 emit 也可以通过给 defineProps 和 defineEmits 传递纯类型参数的方式来声明：

声明

const props = defineProps<{
  foo: string
  bar?: number
}>()

const emit = defineEmits<{
  (e: 'change', id: number): void
  (e: 'update', value: string): void
}>()

// 3.3+：另一种更简洁的语法
const emit = defineEmits<{
  change: [id: number] // 具名元组语法
  update: [value: string]
}>()

6、provide/inject

7、components

8、dom

9、函数事件

（待补充。。。）