1.readonly
使用readonly包装过的函数，内部是深层次只读的
如代码所示：
<template>
<h4>当前求和是：{
{sum}}</h4>
<button @click="sum++">点我加一</button>
<hr>
<h2>姓名：{
{name}}</h2>
<h2>年龄：{
{age}}</h2>
<h2>薪资：{
{job.j1.salary}}</h2>
<button @click="name+='~'">修改信息</button>
<button @click="age++">增长年龄</button>
<button @click="job.j1.salary++">涨薪</button>
</template>
<script>
import { ref,reactive,toRefs,readonly,shallowReadonly} from "vue";
export default {
name: "Demo",
setup() {
//数据
let sum = ref(0)
//定义了一个响应式的对象
let person = reactive({
name:'张三',
age:18,
job:{
j1:{
salary:20
}
}
})
person = readonly(person)//使用了readonly将对象变为只读
return {
sum,
...toRefs(person)
};
},
};
</script>
<style>
</style>代码中定义了了一个响应式对象person，然后使用readonly（person）方法传入person返回一个只读的对象，用person接受并返回。所以当运行完成打开页面，点击修改信息，增长年龄，涨薪，都会无法修改。
如图：
2.shallowReadonly
使用shallowReadonly包装过的函数，只有最外层属性是只读的，内层依然可以改写。
如代码所示：
//跟上面的代码一样，只是将readonly(person)=> shallowReadonly(person)
person = shallowReadonly(person)//使用了shallowReadonly将对象变为浅只读我们定义的响应式对象里面只读的是外面的那一层（name, age），所以在页面上修改的时候，只有name和age会提示如图
3.明明定义的是一个响应式数据（person）当然就是希望被修改的，但shallowReadonly和readonly又是希望不被修改的。那这到底什么时候使用呢？
如果这个代码中的person的数据是其他组件传给你的，那个组件只是希望你使用但是不修改，但是你不确定你的组件内会不会修改它，所以用readonly和shallowReadonly去修饰，用这两个包裹person生成新的person对象，就算你修改新生成person对象的属性，也不会影响原有的person属性