摘要

Vue 提供了一系列工具函數來處理與 ref 相關的進階操作：isRef 檢查一個值是否為 ref；unref 獲取 ref 的值；toRef 為物件屬性建立 ref；toRefs 將整個物件轉換為 ref 的集合。

定義與說明

isRef(value)：檢查一個值是否為 ref 物件，回傳 true 或 false。

unref(value)：如果值是 ref，則回傳其 .value；否則直接回傳該值。是 isRef(val) ? val.value : val 的語法糖。

toRef(object, key)：為一個響應式物件的指定屬性建立一個 ref。這個新建的 ref 與原始屬性保持同步。

toRefs(object)：將一個響應式物件的所有屬性，轉換為一個包含對應 ref 的普通物件。常用於解構 props 或 reactive 物件而不失去其響應性。

實作範例

Vue SFC

<script setup>
import { reactive, toRefs } from 'vue';
const user = reactive({ name: 'Jake', age: 30 });

// 如果直接解構: const { name, age } = user; // name 和 age 會失去響應性
// 正確做法：使用 toRefs
const { name, age } = toRefs(user);
// 現在，name 和 age 都是 ref，且與 user 物件保持同步
</script>

<template>
  <input v-model="name" /> <!-- 可以正常工作 -->
  <input v-model="age" />   <!-- 可以正常工作 -->
</template>

結論

這些響應式工具提供了處理 ref 和 reactive 物件時所需的靈活性和控制力，特別是 toRefs，它是在組合式 API 中安全地解構響應式物件的關鍵。

isRef toRefs 響應式工具