2024-12-06 titleInput.value?.focus(); 為什麼 value 後面要加？

發表於 更新於 分類於 閱讀次數：
2024-12-06 titleInput.value?.focus(); 為什麼 value 後面要加？

2024-12-06 titleInput.value?.focus(); 為什麼 value 後面要加？

titleInput.value?.focus(); 中的 ?. 是 可選鏈接運算符（Optional Chaining Operator）。這個符號在 JavaScript 中的作用是安全地訪問物件的屬性或方法，避免出現 undefined 或 null 時拋出錯誤。

為什麼要加 ?.

在 Vue 中，ref 返回的 value 屬性可能為 undefined，尤其在 DOM 尚未渲染完成或 ref 尚未綁定到對應的元素時。如果我們直接調用 focus() 而沒有檢查 value 是否存在，當 value 為 undefined 時，會引發錯誤：

1
titleInput.value.focus(); // 當 titleInput.value 是 undefined 時，會拋出 TypeError

使用 ?. 可以避免這種情況：

  • 如果 titleInput.value 存在，則調用 focus() 方法。
  • 如果 titleInput.value 為 null 或 undefined，整個表達式將返回 undefined，而不會執行 focus()，也不會拋出錯誤。

運作方式

可選鏈接的核心是確保代碼安全執行：

1
2
3
4
5
titleInput.value?.focus();
// 等效於：
if (titleInput.value !== null && titleInput.value !== undefined) {
  titleInput.value.focus();
}

在 Vue 中的常見情境

在 Vue 中，DOM 元素的 ref 在初次渲染時可能還沒綁定，這就是為什麼我們常需要使用 ?.：

  1. 確保安全訪問：避免因 ref 尚未綁定而導致的錯誤。
  2. **搭配 nextTick**：確保在 DOM 更新後訪問到 ref。

總結

加上 ?. 的目的是為了在 ref 的 value 尚未綁定時避免錯誤，使代碼更健壯、更安全。