Vue3 響應性基礎 API 之 `readonly`

基本用法

• 接受一個對象 (響應式或純對象) 或 ref 並返回原始對象的只讀代理。

const original = reactive({ count: 0 })

const copy = readonly(original)

watchEffect(() => {
  // 用於響應性追蹤
  console.log(copy.count)
})

// 變更 original 會觸發依賴於副本的偵聽器
original.count++

// 變更副本將失敗並導致警告
copy.count++ // 警告! Set operation on key "name" failed: target is readonly.

• 只讀代理是深層的：任何被訪問的嵌套 property 也是只讀的。

const obj = {name: 'hyh', info: { age: 26 }}

const copy = readonly(obj)

copy.name = '11'
copy.info.age = 30
// 警告! Set operation on key "name" failed: target is readonly.

• 與 reactive 一樣，如果任何 property 使用了 ref，當它通過代理訪問時，則被自動解包

const raw = {
  count: ref(123)
}

const copy = readonly(raw)

console.log(raw.count.value) // 123
console.log(copy.count) // 123