readonly

2023年05月03日

柏拉文

越努力，越幸运

一、认识

---

readonly 接受一个对象 (不论是响应式还是普通的) 或是一个 ref，返回一个原值的只读代理。只读代理是深层的: 对任何嵌套属性的访问都将是只读的。它的 ref 解包行为与 reactive() 相同，但解包得到的值是只读的。要避免深层级的转换行为，请使用 shallowReadonly() 作替代。

二、语法

---

<template>
  <div>
    {{ obj.a }}

    <button @click="onChangeObj">按钮</button>
  </div>
</template>

<script setup lang="ts">
import { readonly } from 'vue'

const obj = readonly({
  a: 0
})


const onChangeObj = () => {
  obj.a += 1 // 更新 obj.a 不生效, 发出警告
}
</script>