1. readonly

readonly: 让一个响应式数据变为只读的（深只读）修改不会生效。
此时所有的属性都是不能修改的。

<template>
  <h2>姓名：{{name}}</h2>
  <h2>年龄:{{age}}</h2>
  <h2>性别:{{sex}}</h2>
  <h2>薪资:{{job.salery}}</h2>
  <hr>
  <button @click="name += '@'">修改姓名</button>
  <button @click="age ++">修改年龄</button>
  <button @click="job.salery ++">修改薪资</button>
  <h2>当前的值：{{sum}}</h2>
  <button @click="sum++">点我+1</button>
</template>
<script>
import { reactive, toRefs,  readonly } from 'vue'
export default {
  setup() {
    let person = reactive({
      name:'IRIC',
      age:12,
      sex:'女',
      job:{
        salery:20
      },
      address:''
    })
    person = readonly(person)
    return { ...toRefs(person)  }
  },
}
</script>

2. shallowReadonly

• shallowReadonly：让一个响应式数据变为只读的（浅只读）。
• 应用场景： 不希望数据被修改时。
• 下面的例子只有薪资是可以修改的。 ```javascript

```