俗話說：「羅馬不是一天造成的」今天的我比昨天更強一點，總有一天會贏過隔壁鱈魚的 (ง๑ •̀_•́)ง
#挽回愛情的第三天

前情提要

本篇是該系列正式開始介紹的第一篇，筆者選擇了一個簡單的函式來讓各位先熟悉一下 VueUse ，後續的每個函式基本上都會至少分兩篇，第一篇會介紹該函式的功能、參數與範例，第二篇則是會針對程式碼，以開發者的視角來分析函式中運用的技巧，如果其中有運用到一些有趣的技巧或是觀念，就會有第三篇。這中間如果有任何遺漏或是寫錯再麻煩各位讀者鞭小力一點 (๑•́ ₃ •̀๑)

isDefined API

功能

isDefined 用來檢查一個值是否為已定義的狀態，這裡的「已定義」指的是值不是 null 或 undefined。這個函式特別適用於 Vue 的 Ref 和 ComputedRef，並且會自動幫助 TypeScript 理解值的類型是否已收縮。

Props

返回值

isDefined 返回一個布林值：

• true：當傳入的值已定義，且不是 null 或 undefined 時返回。
• false：當傳入的值是 null 或 undefined 時返回。

用法範例

範例 1：Ref 的判斷

import { ref } from 'vue'
import { isDefined } from '@vueuse/core'

const example = ref<string | undefined>(undefined) // 可能是 string 或 undefined 的 Ref

if (isDefined(example)) {
  // 此時 TypeScript 已知道 example 是一個 Ref<string>
  console.log(example.value) // 正常使用 example 的值
}

範例 2：ComputedRef 的判斷

import { computed, ref } from 'vue'
import { isDefined } from '@vueuse/core'

const number = ref<number | undefined>(undefined)
const computedNumber = computed(() => number.value ? number.value * 2 : undefined)

if (isDefined(computedNumber)) {
  // 此時 computedNumber 類型被縮窄為 ComputedRef<number>
  console.log(computedNumber.value) // 可放心使用 computedNumber 的值
}

範例 3：普通值的判斷

import { isDefined } from '@vueuse/core'

const value: string | undefined = 'Hello'

if (isDefined(value)) {
  // 此時 TypeScript 已知道 value 是 string
  console.log(value) // 可以安全地使用 value
}

isDefined 的使用場景

在 Vue 開發中，我們經常會操作許多來自 Vue 的響應式資料結構，如 ref 和 computed。這些資料有時可能會被初始化為 null 或者沒有值 (undefined)，這時如果我們需要進行邏輯處理，往往需要手動檢查是否存在 null 或 undefined，這樣的程式碼很容易變得繁瑣冗長。

例如，在沒有 isDefined 函數的情況下，程式碼可能如下：

if (value !== null && value !== undefined) {
  // 處理有效值
}

使用 isDefined 後，我們可以簡化判斷：

if (isDefined(value)) {
  // 處理有效值
}

這種判斷方法不僅簡化了程式碼，還提升了程式碼的可讀性。此外，isDefined 的多載讓我們可以靈活地處理 ref 和普通變數，而不必關心它們的具體型別（這部分明日會詳細說明）。

為什麼開發者需要 isDefined

1. 簡化重複的空值檢查：開發過程中，我們經常需要判斷變數是否為 null 或 undefined。如果沒有一個專門的函數來處理，這些檢查很容易變得冗長和易錯。isDefined 可以幫助開發者快速判斷並確保程式碼的簡潔性。
2. 提高程式碼的可讀性：利用 isDefined 可以讓程式碼的意圖更加明確。當其他開發者看到 isDefined 時，會立即了解這段程式碼是為了檢查某個值是否已被定義，這比使用一般的空值檢查語句更加直觀。
3. 對 TypeScript 友好：利用多載與型別收縮的特性，幫助開發者在編譯時期就能夠檢測到可能的型別錯誤。當我們使用 isDefined 後，TypeScript 能夠更好地推斷後續的變數操作，減少了型別不匹配的風險。

結論

isDefined 是一個簡單但非常實用的函數，尤其在 Vue 開發中處理響應式資料時尤為重要。它通過 unref 函數抽象了 ref 與普通值的區別，並提供一個統一的空值檢查方法。對於開發者來說，isDefined 能夠大幅度提升程式碼的可讀性與維護性，減少冗餘的空值檢查程式碼。這正是為什麼這個函數成為 VueUse 工具庫中不可或缺的一部分的原因。

透過合理使用 isDefined，我們可以在保持程式碼簡潔的同時，確保應用程式邏輯的健全性。