Vue3 readonly()

readonly()函数的作用是接收一个对象，其可以是普通对象，也可以是响应式对象，然后返回接收对象的只读代理对象。

通俗地讲，即如果想要一个对象是只读的，就使用readonly()函数。

 

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

<template>     <span>         <p>{{obj}}</p>         <p>{{newobj}}</p>     </span> </template>   <script setup>     import {reactive, readonly} from "vue"       var obj = reactive({num: 10})     var newobj = readonly(obj)     console.log(obj.num)     console.log(newobj.num)     obj.num++     newobj.num++ // 控制台会报警告(Set operation on key "num" failed: target is readonly)且不会生效     console.log(obj.num)     console.log(newobj.num)   </script>