shallowReadonly

2023年05月03日

柏拉文

越努力，越幸运

一、认识

---

shallowReadonly 是 readonly() 的浅层作用形式。和 readonly() 不同，这里没有深层级的转换：只有根层级的属性变为了只读。属性的值都会被原样存储和暴露，这也意味着值为 ref 的属性不会被自动解包了。

二、语法

---

<template>
  <div>
  </div>
</template>

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

const obj = shallowReadonly({
  a: 1,
  b: {
    c: 1,
    d: 2
  }
});

obj.a++; // 更新失败, 发出警告
console.log(obj.a); 

obj.b.c++; // 更新成功
console.log(obj.b.c)
</script>