如何优雅地处理 TypeScript Vue 组件中未初始化的响应式对象？

2024-03-24 13:13:31

优雅地处理 TypeScript Vue 组件中未初始化的响应式对象

引言

在 Vue 3 中，使用响应式对象异步填充外部数据是一个常见的实践。然而，在处理未初始化的响应式对象时，开发者可能会面临繁琐的类型断言或空值判断。本文将深入探讨如何优雅地处理此问题，提供实用且可行的解决方案。

问题

让我们考虑以下场景：

import { Ref, ref } from 'vue'
import { Car } from '@mytypes/vehicules'

const car: Ref<Car|{}> = ref({})

此代码创建了一个可为空对象的响应式对象 car。虽然它允许我们处理空值，但我们需要在整个值传播过程中不断声明 Car|{}，这会增加代码的冗余和复杂性。

解决方案

1. 使用 defineAsyncComputed

Vue 3 提供了 defineAsyncComputed，可用于异步计算响应式值。它允许我们延迟初始化 car 对象，如下所示：

import { defineAsyncComputed, Ref } from 'vue'
import { Car } from '@mytypes/vehicules'

const useCar = () => {
  const car: Ref<Car|undefined> = ref()

  const getCar = defineAsyncComputed(() => {
    return fetch('/cars/42').then((result: Car) => {
      car.value = result
      return result
    })
  })

  return { car, getCar }
}

2. 使用 onBeforeMount

另一个选择是在组件的 onBeforeMount 生命周期钩子中进行异步计算：

import { onBeforeMount, Ref } from 'vue'
import { Car } from '@mytypes/vehicules'

const useCar = () => {
  const car: Ref<Car|undefined> = ref()

  onBeforeMount(() => {
    fetch('/cars/42').then((result: Car) => {
      car.value = result
    })
  })

  return { car }
}