• readonly() 里面可以传入一个响应式的数据参数，表示只读

• 应用 ： 有一些节点不能修改，可以用这个

<template>
  <div class="App">
    <p>年龄是：{
   { age }}</p>
    <button @click="age++">改变年龄</button>
  </div>
</template>
​
<script>
import { reactive, readonly, toRefs } from 'vue'
​
export default {
  name: 'App',
  setup() {
    let person = reactive({
      age: 24
    })
    person = readonly(person)
    return { ...toRefs(person) }
  },
}
</script>

• shallowReadonly() 里面可以传入一个响应式的数据参数，只会让第一层可读，内层的不会影响

<template>
  <div class="App">
    <p>年龄是：{
   { age }}</p>
    <p>爱好是：{
   { hobby.sing }}</p>
    <button @click="age++">改变年龄</button>
    <button @click="hobby.sing += '~'">改变爱好</button>
  </div>
</template>
​
<script>
import { reactive, shallowReadonly, toRefs } from 'vue'
​
export default {
  name: 'App',
  setup() {
    // shallowRef() 只能处理简单数据类型的响应式，不能处理对象的响应式
    let person = reactive({
      age: 24,
      hobby: {
        sing: '唱',
        dance: '跳',
      },
    })
    person = shallowReadonly(person)
    return { ...toRefs(person) }
  },
}
</script>