摘要

readonly() 函數能接收一個響應式物件（由 ref 或 reactive 建立），並回傳一個唯讀的版本。這是一種保護狀態、防止被意外修改的機制。

定義與說明

readonly() 會建立一個代理物件，其所有屬性都是唯讀的。當你嘗試修改這個唯讀物件的任何屬性時，操作會失敗，並在瀏覽器控制台中顯示一條警告訊息。這在需要將內部狀態暴露給外部元件，但又不希望外部元件直接修改它時非常有用，有助於維持單向資料流。

實作範例

Vue SFC

<script setup>
import { reactive, readonly } from 'vue';

const originalState = reactive({ count: 0 });

// 建立一個唯讀版本的 state
const readOnlyState = readonly(originalState);

function modifyOriginal() {
  // 可以修改原始的 state
  originalState.count++; 
}

function modifyReadOnly() {
  // 嘗試修改唯讀 state，這會失敗並在控制台產生警告
  readOnlyState.count++;
}
</script>

<template>
  <p>Count: {{ readOnlyState.count }}</p>
  <button @click="modifyOriginal">從內部修改 (成功)</button>
  <button @click="modifyReadOnly">從外部修改 (失敗)</button>
</template>

結論

readonly() 是實現更安全狀態管理模式的關鍵工具。它透過強制數據的唯讀性，確保了狀態只能由其擁有者進行修改，讓複雜應用中的資料流動更加清晰和可預測。

readonly 唯讀狀態保護