Vue3的readonly与shallowReadonly

readonly，让一个响应式数据只读（深层次只读）。
shallowReadonly，让一个响应式数据只读（浅层次只读）。

基础实例

项目目录如下。

• main.js

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

• App.vue

<template>
  <Demo/>
</template>

<script>
import Demo from './components/Demo.vue'
export default {
  name: 'App',
  components: {
    Demo
  }
}
</script>

• Demo.vue

<template>
  <h2>姓名：{{name}}</h2>
  <h2>年龄：{{age}}</h2>
  <h2>薪酬：{{salary}}K</h2>
  <button @click="age++">增长年龄</button>&nbsp;
  <button @click="salary++">涨薪</button>
</template>

<script>
import {reactive, toRef} from "vue";
export default {
  name:"Demo",
  setup(){
    let person = reactive({
      name:"张三",
      age:25,
      job:{
        salary:30
      }
    })

    return {
      name:toRef(person,"name"),
      age:toRef(person,"age"),
      salary:toRef(person.job,"salary")
    }
  }
}
</script>

• 启动应用，测试效果
  

使用readonly

• 修改Demo.vue

<template>
  <h2>姓名：{{name}}</h2>
  <h2>年龄：{{age}}</h2>
  <h2>薪酬：{{salary}}K</h2>
  <button @click="age++">增长年龄</button>&nbsp;
  <button @click="salary++">涨薪</button>
</template>

<script>
import {reactive, readonly, toRef} from "vue";
export default {
  name:"Demo",
  setup(){
    let person = reactive({
      name:"张三",
      age:25,
      job:{
        salary:30
      }
    })

    person = readonly(person);
    
    return {
      name:toRef(person,"name"),
      age:toRef(person,"age"),
      salary:toRef(person.job,"salary")
    }
  }
}
</script>

• 测试效果
  点击增长年龄，修改age失败；点击涨薪，修改salary失败。
  因为readonly让响应式对象person变得只读，且深只读。
  

使用shallowReadonly

• 修改Demo.vue

<template>
  <h2>姓名：{{name}}</h2>
  <h2>年龄：{{age}}</h2>
  <h2>薪酬：{{salary}}K</h2>
  <button @click="age++">增长年龄</button>&nbsp;
  <button @click="salary++">涨薪</button>
</template>

<script>
import {reactive, shallowReadonly, toRef} from "vue";
export default {
  name:"Demo",
  setup(){
    let person = reactive({
      name:"张三",
      age:25,
      job:{
        salary:30
      }
    })

    person = shallowReadonly(person);
    
    return {
      name:toRef(person,"name"),
      age:toRef(person,"age"),
      salary:toRef(person.job,"salary")
    }
  }
}
</script>

• 测试效果
  点击增长年龄，修改age失败；点击涨薪，salary值更新。
  因为shallowReadonly让响应式对象person变得只读，且浅只读。响应式对象最外层的属性只读，但再深一层的属性可以被修改。