readonly()函数的使用

readonly() 函数的作用是接收一个对象，其可以是普通对象，也可以是响应式对象，然后返回接收对象的只读代理对象。通俗地讲，即如果想要一个对象是只读的，就使用 readonly() 函数。

新建 readonly.vue 文件，步骤如下。

（1）使用reactive()函数创建响应式对象。（2）使用readonly()函数把响应式对象变成只读对象。（3）尝试修改readonly()函数返回的代理对象，代码如下。

<template>
  <div>
    <h1>readonly</h1>
  </div>
</template>

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

export default {
  setup() {
    // 1．使用 reactive() 函数创建响应式代理对象
    var obj = reactive({ num: 10 });

    // 2．使用 readonly() 函数把创建的响应式代理对象变成只读对象
    var newobj = readonly(obj);

    // 3．取值
    console.log(obj.num); // 输出 10
    console.log(newobj.num); // 输出 10

    // 4．尝试修改 newobj.num 的值
    // newobj.num++; // 这行代码会报错，因为 newobj 是只读的

    // 正确的做法是修改原始对象 obj
    obj.num++; // 修改原始对象 obj.num

    console.log(obj.num); // 输出 11
    console.log(newobj.num); // 输出 11，readonly 对象会同步更新

    return {}; // setup 函数需要返回一个对象，即使是空对象
  },
};
</script>

结论：readonly() 函数返回的代理对象只能取值，如果要修改它，控制台会报警告（Set operation on key "num" failed:target is readonly）且不会生效。