- readonly 让一个响应式数据变为只读的（深只读）
- shallowReadonly 让一个响应式数据变为只读的（浅只读）
readonly
<template> <h1>{{ name }}</h1> <h1>{{ age }}</h1> <h1>{{ job.salary.value }}</h1> <!--> 不可以修改 <--> <button @click="name='sss'">修改name</button> <!--> 不可以修改 <--> <button @click="age++">age+1</button> <!--> 不可以修改 <--> <button @click="job.salary.value++">value++</button> </template> <script setup> import { ref, reactive, readonly, shallowReadonly, toRefs} from 'vue' let name = ref("张三") let age = ref(18) let job = reactive({ salary:{ value:70 } }) name = readonly(name) age = readonly(age) job = readonly(job) </script>
readonly是一个函数，他会接收一个响应式的数据，如上定义的name变量，将该变量加工一番后重新返回一个name，这个重新返回的name变量中的所有的东西都不允许修改，所以我们现在再点击上面的修改按钮 name 变量也不会有任何改变，并且控制台会有警告
shallowReadonly
shallowReadonly只限制对象中的第一层数据（不能改动，如：salary），但是嵌套的深层次的value属性值是可以更改的，我们点击更改按钮测试就能发现
<template> <h1>{{ job }}</h1> <!--> 不可以修改 <--> <button @click="job.salary = { value: 80 }">修改salary</button> <!--> 可以修改 <--> <button @click="job.salary.value = 100">修改value</button> </template> <script setup> import { ref, reactive, readonly, shallowReadonly, toRefs} from 'vue' let job = reactive({ salary:{ value:70 } }) job = shallowReadonly(job) </script>
